动画之间的延迟

Question

我试图在每组动画的开头添加一个延迟。动画工作正常，但是当我添加.delay（5000）之前.animate什么都不起作用。

$(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

您 必须 可以使用链接的动画/延迟要求 - 例如：

$("#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); 

Answer 2

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

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

recursive_animation(); 

实施例：http://jsfiddle.net/j3LLe/