jquery - 反复上下动画div

Question

我想要一个使用 jquery 反复上下移动的 div。换句话说，div 从某个位置的顶部开始，向下移动，然后向上移动并重复此操作，从顶部到底部大约 1 秒间隔，再到顶部大约 1 秒。有 slideUp 和 slideDown 以及 animate 方法，但我不确定如何实现这一点，因为它需要处于无限循环中，而在 javascript 中，您必须避免此类循环。

Answer 1

jQuery 的动画逻辑可以安全地使用回调调用或链接在一起，而无需使用 setTimeout/setInterval：

像这样的东西应该适合你

演示

function loop() {
    $('.bouncer').animate({'top': '500'}, {
        duration: 1000, 
        complete: function() {
            $('.bouncer').animate({top: 0}, {
                duration: 1000, 
                complete: loop});
        }});
}
loop();

Answer 2

使用 setInterval，见这里： http ://www.w3schools.com/js/js_timing.asp

所以试试这个

Javascript

$(document).ready(function() {
    setInterval(function() {
        $('#thediv').slideUp('500', function() {
            $('#thediv').slideDown('500');
        });
    }, 1000);
});

HTML

<div id='thediv' style='width:100px;height:200px;border:1px solid black;'>
Div Contents
</div>

您可能需要调整时间（以毫秒为单位）