Question

我想有一个使用jquery重复上下移动的div。换句话说，div从某个位置的顶部开始，向下移动，然后向上移动并重复此操作，从上到下大约1秒的间隔，然后返回到顶部。有slideUp和slideDown以及动画方法，但我不知道如何实现这个，因为它需要在无限循环中，在javascript中你必须避免这样的循环。

Answer 1

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

这样的事情对你来说应该没问题

Demo

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>

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

反复动画一个div上下

2 个答案: