Я хочу изменить верхнюю позицию класса 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>
3 ответа
Так же, как упомянуто @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>
Как уже говорили другие, если вы хотите использовать атрибут top, вам нужно дать
position:relative;
К элементу. Таким образом, элемент будет установлен относительно его положения, и это может быть немного сложнее. Кстати, я обычно предпочитаю делать контейнер контейнера относительно объявления, помещая позиционируемый элемент в него, так что он будет отображаться относительно его контейнера:
.container{
position:relative;
}
.element{
position:absolute;
}
Это HTML:
<div class="container">
<div class="element"></div>
</div>
Вы должны использовать 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>
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.