Работа с CSS, главное свойство в JQuery

Question

Я хочу изменить верхнюю позицию класса BBB через 100 мс, но выяснилось, что .css (top) не работает.

Пожалуйста помоги.

<!DOCTYPE html>
<html>
<head>
   <script src="jquery-3.2.1.min.js"></script>
</head>
<body>

   <div class="ddd"><div class='bbb'>Bobobo</div></div>

</body>
<script>    
  $(function myFunction() {
    setInterval(alertFunc, 100);
  });   

  function alertFunc() {
    var b = $('.bbb').first();
    b.css('top', 100 + 'px');
  }
</script>
</html>

javascript jquery

-1

gorrch 29 Авг 2017 в 00:31

Answer 1

Так же, как упомянуто @jhpratt. Вам нужно добавить position:relative в класс .bbb.

Увидеть ниже.

$(function myFunction() {
  setTimeout(alertFunc, 500);
});

function alertFunc() {
  var b = $('.bbb').first();
  b.css('top', 100 + 'px');
}

.bbb {
  position: relative;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="ddd">
  <div class='bbb'>Bobobo</div>
</div>

0

blurfus 28 Авг 2017 в 21:39

Answer 2

Как уже говорили другие, если вы хотите использовать атрибут top, вам нужно дать

position:relative;

К элементу. Таким образом, элемент будет установлен относительно его положения, и это может быть немного сложнее. Кстати, я обычно предпочитаю делать контейнер контейнера относительно объявления, помещая позиционируемый элемент в него, так что он будет отображаться относительно его контейнера:

.container{
    position:relative;
}

.element{
    position:absolute;
}

Это HTML:

<div class="container">
     <div class="element"></div>
</div>

0

Mario Catillo 28 Авг 2017 в 21:58

Answer 3

Вы должны использовать setTimeout() вместо setInterval(), поэтому alertFun() будет выполняться только один раз.

let alertFunc = function() {

  $('.bbb').css('top', 100 + 'px');

}

setTimeout(alertFunc, 100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ddd">
  <div class='bbb'>Bobobo</div>
</div>

1

Ivan 28 Авг 2017 в 21:40

Работа с CSS, главное свойство в JQuery

3 ответа

Похожие вопросы

Новые вопросы

javascript