做一個簡單的fadeIn fadeOut＆循環與jQuery

Question

我想做一個簡單的fadeIn fadeOut &循環與jQuery。

第一次是OK！但是當再次循環時，隱藏的fadeIn＃pic2。如何解決它？

HTML

<div id="pics"> 
<img src="bg01.jpg" id="pic1" /> 
<img src="bg02.jpg" id="pic2" /> 
</div> 

CSS

#pics img{ 
position:absolute; 
display: none; 
} 

JS

$(document).ready(function() { 

    runslide(); 

    function runslide() { 
    $('#pic1').fadeIn(1500).delay(3500).fadeOut(1500); 
    $('#pic2').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500); 

    setTimeout(runslide, 10000); 
    } 

}); 

Answer 1

你的代碼依賴於動畫的時間是非常準確和瀏覽器往往不同步。你應該修改你的Javascript看起來像這樣：

runslide(); 

function runslide() { 
    $('#pic1').fadeIn(1500).delay(3500).fadeOut(1500, function() { 
     $('#pic2').fadeIn(1500).delay(3500).fadeOut(1500, function() { 
      runslide(); 
     }); 
    }); 
} 

這將等待前一個動畫開始下一個動畫之前結束保持的動畫同步。

這是一個工作示例。我用文字替換了你的圖像，但是否則它是相同的代碼。 http://jsfiddle.net/27uy8/