我想用 jQuery 制作一个简单的 fadeIn fadeOut 和循环。
第一次还可以!但是当再次循环时,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);
}
});
最佳答案
您的代码依赖于非常精确的动画时间,并且浏览器往往会不同步。您应该将 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/
关于jquery - 使用 jQuery 制作一个简单的 fadeIn fadeOut 和循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10100013/