如何让jquery动画循环播放

时间:2013-08-19 08:52:49

标签: jquery parallax

我基本上在视差网站上发生了一个简单的动画。在第一组图像动画(通过移动边距扫描然后输出)后,我使用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})
    }
}

1 个答案:

答案 0 :(得分:0)

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

以下是jQuery的示例 http://api.jquery.com/animate/

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