为什么拖延链功能导致问题？

var currentImage = 0; 
var images = new Array('Aerodynamics.jpg','ABC_news.jpg','yep.jpg'); 
var newImage = 'url(images/'+images[currentImage]+')'; 

function slideSwitch() { 
    $('.inner_img').css('background-image',newImage).animate({opacity:1.0},4000).delay(2000) 
    .animate({opacity:0.0},4000,function(){ 
     if(currentImage < images.length-1){ 
      currentImage++; 
     }else{ 
      currentImage = 0; 
     }; 
    }); 
};

第一个动画进行得很好，delay（）也能正常工作，下一个opacity的动画返回0不能正常工作，我的意思是对象还没有消失它已经触发了回调函数，请告诉我什么我做错了为什么拖延链功能导致问题？

来源

2011-04-08 Remir

你怎么触发slideSwitch功能？由于某种原因，它可能会在完成之前重新开始。 – 2011-04-08 21:51:37

.animate()是非阻塞的，这意味着你的链中的下一步（延迟）立即开始，而不是动画完成后。

使用jQuery 1.5的Deferred objects，您可以通过创建仅在动画完成时才解析的Deferred promise来强制阻止动画动作。

我回答了问题，这正是这一点，昨天看到我的回答这里的一个例子：Mouseover .animate stops prior .animate

来源

2011-04-08 21:50:27 entropo

你只需要附加还原动画匿名函数。

function slideSwitch() { 
    $('.inner_img').css('background-image',newImage) 
     .animate({opacity:1.0},4000, function() { 

      $(this).animate({opacity:0.0},4000,function(){ 
      if(currentImage < images.length-1){ 
       currentImage++; 
      }else{ 
       currentImage = 0; 
      }); 
    });  
};

来源

2011-04-08 21:54:47

为什么拖延链功能导致问题？

回答

相关问题