Question

我正在尝试在每组动画的开头添加延迟。动画效果很好，但是当我添加.delay（5000）之前.ananan没有任何效果。

    $(document).ready(function(){

    -->add .delay here <---

    $("#hand").animate({left:'-=300px'},1500 );
    $("#hand").animate({left:'+=300px'},1000 );

    -->add .delay here <---

    $("#hand").animate({left:'-=300px'},1500  );
    $("#hand").animate({left:'+=300px'},1000 );

    $("#hand").animate({left:'-=300px'},1500  );
    $("#hand").animate({left:'+=300px'},1000 );

    });

这里有一组用于同一功能的代码吗？我需要它无限制地动画。

Answer 1

你可以做一个递归函数调用，让你的动画无限循环。

function recursive_animation() {
    $("#hand").delay( 3000 )
        .animate({left:'-=300px'},1500 )
        .animate({left:'+=300px'},1000, recursive_animation );
}

recursive_animation();

示例： http://jsfiddle.net/j3LLe/

Answer 2

你必须可以使用链接进行动画/延迟调用 - 例如：

$("#hand").animate({left:'-=300px'},1500)
          .delay(5000)
          .animate({left:'+=300px'},1500);

请注意，animate()调用本身是非阻塞的，因此您必须在delay()调用中适应该调用，或者将代码移至完成处理程序。请参阅此working JSFiddle example。

要让这个“永远”运行，您可以将其包装到setInterval()：

setInterval(function() {
    $("#hand").animate({ left: '-=300px'}, 1500)
              .delay(5000)
              .animate({left: '+=300px'}, 1000);
}, 10000);

动画之间的延迟

2 个答案: