幻燈片使用jQuery的動畫

Question

我想爲一個網站創建一個簡單的幻燈片。這裏我試圖無限地調用函數slideShow。但該函數一直運行到動畫函數結束的位置。但是當試圖再次設置CSS屬性時，它不起作用。迭代也不起作用。請指出我犯了什麼錯誤。提前致謝。

$(document).ready(function() { 
    function slideShow() { 
     $('#image1').delay(2000).animate({ 
      opacity: 0 
     }, 5000); 

     $('#image2').delay(2000).animate({ 
      opacity: 1 
     }, 5000); 

     //After this point nothing seems to be working. 
     $("#image1").css("opacity", "1"); 
     $("#image2").css("opacity", "0"); 
     slideShow(); 
    }; 

    slideShow(); 
}; 

Answer 1

在animate（）完成5秒的持續時間之前，您正在更改圖像的CSS屬性。

5秒後再次調用該函數。這工作完美：

$(document).ready(function() { 
    function slideShow() { 
     $('#image1').animate({opacity: 0,}, 5000); 
     $('#image2').animate({ opacity: 1}, 5000); 
    setTimeout(function(){ 
     $("#image1").animate({opacity: 1,},5000); 
     $("#image2").animate({opacity: 0,},5000); 
     slideShow(); // call it recursively but after 5 seconds 
     }, 5000);  
    }; 
    slideShow(); 
}); 

謝謝。 :)

Answer 2

將最後slideShow();與此，對於10秒重複：

setInterval(function() { slideShow(); }, 10000);