动画的div上下反复 [英] Animating a div up and down repeatedly

问题描述

我想有反复上下移动时使用jQuery的div。换句话说，在div开始于某些位置的顶部，向下移动，然后从去从上到下和1个第二背面顶端向后移动并重复这个，在约1秒的时间间隔。还有的效果基本show和了slideDown以及动画的方法，但我不知道如何做到这一点，因为它需要在一个无限循环，在JavaScript中，你必须避免这样的循环。

I would like to have a div that moves up and down repeatedly using jquery. In other words, the div starts at the top of some location, moves down and then moves back up and repeats this, in about a 1 second interval from going from top to bottom and 1 second back to the top. There's the slideUp and slideDown as well as animate methods but I'm not sure how to accomplish this since it needs to be in an endless loop and in javascript you must avoid such loops.

推荐答案

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

jQuery's animate logic can safely be called with callbacks or chained together without using setTimeout/setInterval:

这样的事情应该只是罚款为你

Something like this should work just fine for you

演示

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

这篇关于动画的div上下反复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！