1

私はこのコードを持っています：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() { 
        function loop(){
            $('#picOne').fadeIn(0).fadeOut(8000);
            $('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000);
            $('#picTree').delay(10000).fadeIn(2000).fadeOut(16000);
            $('#picFour').delay(12000).fadeIn(16000).fadeOut(5000);
        }
        loop();
    });
</script>

しかし、最後の写真がフェードアウトすると、コードは繰り返されません。何が問題ですか？

4

3 に答える 3

7

アニメーションの長さを各要素で同じにしたい場合:

var $elements = $('#picOne, #picTwo, #picTree, #picFour');

function anim_loop(index) {
    // Get the element with that index and do the animation
    $elements.eq(index).fadeIn(1000).delay(3000).fadeOut(1000, function() { 
        // Kind of recursive call, increasing the index and keeping in the
        // the range of valid indexes
        anim_loop((index + 1) % $elements.length);
    });
}

anim_loop(0); // start with the first element

アニメーションがどうあるべきか正確にはわかりませんが、コンセプトが明確になることを願っています.

更新:一定時間後に画像のフェードアウトとインを同時に行うには、コールバックでandsetTimeoutを呼び出します。fadeOutanim_loop

$elements.eq(index).fadeIn(1000, function() {
    var $self = $(this);
    setTimeout(function() {
        $self.fadeOut(1000);
        anim_loop((index + 1) % $elements.length);
    }, 3000);
});

デモ

于 2013-01-26T13:58:39.833 に答える
0

関数が一度だけ呼び出されるので問題はありません。

それらをループしたい場合は、setInterval()またはを使用できますsetTimeout()

setInterval(function(){loop()}, 16000);

function loop(){
     $('#picOne').fadeIn(0).fadeOut(8000);
     $('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000);
     $('#picTree').delay(10000).fadeIn(2000).fadeOut(16000);
     $('#picFour').delay(12000).fadeIn(16000).fadeOut(5000);

}

また

function loop(){
     $('#picOne').fadeIn(0).fadeOut(8000);
     $('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000);
     $('#picTree').delay(10000).fadeIn(2000).fadeOut(16000);
     $('#picFour').delay(12000).fadeIn(16000).fadeOut(5000);
 setTimeout(function(){loop()}, 16000);
}

どちらの場合も、関数は every で呼び出され16 seconds = 16000 milisecondsます。

于 2013-01-26T13:54:49.793 に答える