Question

我有一个幻灯片放映，有些项目和图片通过jquery animate来播放我的幻灯片，这是我的代码：

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

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)
   })
});

Answer 2

对于您指定的延迟（以毫秒为单位），请使用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基本上说：“执行此功能（第一个参数），在指定的时间后（第二个参数）”

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

Answer 3

使用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>

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

3 个答案: