做一个简单的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/