如何在一个元素动画后延迟？

Question

我有一个幻灯片放映，其中一些项目和图像通过 jquery 动画进入我的幻灯片放映，这是我的代码：

$("#item-1").animate({left:100},1000,function(){
   $("#item-2").animate({left:250},2000, function(){
      //I want below Item come with a long delay, I mean a delay after #item-2
      $("#item-3").animate({left:100},1250)
   })
});

如何做延时？

Answer 1

对于以毫秒为单位指定的延迟，请使用 setTimeout:

$("#item-1").animate({left:100},1000,function(){
   $("#item-2").animate({left:250},2000, function(){
      setTimeout(function(){
          $("#item-3").animate({left:100},1250)
      }, 2000);
   })
});

setTimeout 基本上说："perform this function (first parameter), after the specified amount of time (second parameter)"

http://www.w3schools.com/jsref/met_win_settimeout.asp

Answer 2

使用 jQuery setTimeOut 函数实现：

$("#item-1").animate({left:100},1000,function(){
   $("#item-2").animate({left:250},2000, function(){
      //I want below Item come with a long delay, I mean a delay after #item-2
      //Trigerring function after specific time .
    setTimeout(function(){ 
       $("#item-3").animate({left:350},1250)
     }, 2000);      
   })
});

div{
    color:red;
    position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item-1">one</div>
<div id="item-2">two</div>
<div id="item-3">three</div>

Answer 3

jQuery有一个方法可以解决这个问题，具体与动画队列有关：

https://api.jquery.com/delay/

下面的工作示例（在我的控制台中）：

$("#item-1").animate({left:100},1000,function(){
   $("#item-2").animate({left:250},2000, function(){
      //I want below Item come with a long delay, I mean a delay after #item-2
      $("#item-3").delay(2000).animate({left:100},1250)
   })
});

如何在一个元素动画后延迟？

How to delay after one element animation?

javascript

jquery

jquery-animate

slideshow