jquery - 如何让 jquery 动画循环播放

Question

我基本上在视差网站上发生了一个简单的动画。在第一组图像动画后（通过移动边距扫入然后扫出），我使用 TimeOut 将其删除，然后在第二组图像中排队。工作正常，我只需要它循环。

$('#slide5').waypoint(function(event, direction) {
    if (direction === 'down') {

        function runIt() {

            $('.img-promo').stop().animate({marginLeft: '30%'},{duration:750})

            $('.img-tour').stop().animate({marginLeft: '30%'},{duration:750})
            $('.img-distro').stop().animate({marginLeft: '30%'},{duration:750})

            $('.img-promo').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750})

            $('.img-tour').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750})
            $('.img-distro').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750})

            setTimeout(function() {
                $(".img-promo").hide();
                $(".img-tour").hide();

                $(".img-distro").hide();

            }, 3900);

            $('.img-album').delay(3800).stop().animate({marginLeft: '30%'},{duration:750})

            $('.img-mastering').delay(3800).stop().animate({marginLeft: '30%'},{duration:750})
            $('.img-event').delay(3800).stop().animate({marginLeft: '30%'},{duration:750})

            $('.img-album').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750})

            $('.img-mastering').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750})
            $('.img-event').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750})
        }
        runIt();
    }
    else {
        $('.img-promo').animate({marginLeft: '-90%'},{duration:750})
        $('.img-tour').animate({marginLeft: '120%'},{duration:750})

        $('.img-distro').animate({marginLeft: '-90%'},{duration:750})
    }
}

Answer 1

您需要使用每个动画的回调函数来加载下一个动画，然后在最后移动到开头

这是来自 jQuery http://api.jquery.com/animate/的示例

  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });