2

jQueryで簡単なfadeInのfadeOut&ループを作りたいです。

初めてでも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);
    }

});
4

1 に答える 1

4

あなたのコードは、アニメーションのタイミングが非常に正確であることに依存しており、ブラウザーは同期しなくなる傾向があります。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/

于 2012-04-11T05:26:44.730 に答える