Question

我想做一个简单的fadeIn fadeOut＆amp;循环使用jQuery。

第一次还可以！但是当再次循环时，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/

做一个简单的淡入淡出淡出＆amp;用jQuery循环

1 个答案: