爲什麼拖延鏈功能導致問題？

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

爲什麼拖延鏈功能導致問題？

回答

相關問題