反复动画一个div上下

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

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