0

私は JavaScript でこのコードを論争の的にループさせるほどコーディングしていないか、少なくとも何度もループさせていません。

これがコードです。divの背景をフェードインおよびフェードアウトします。ループしたいです。

<script>
var timeInOut=2000

$(document).ready(function(){ 
     $("#background2").fadeIn(timeInOut,function(){
        $("#background3").fadeIn(timeInOut,function(){
        $("#background2").css("display","none");
        $("#background3").fadeOut(timeInOut);
        });
     });
 });
</script>

前もって感謝します、スティーブ

4

3 に答える 3

1 
$(document).ready(function(){ 
    window.setInterval(function(){
         $("#background2").fadeIn(timeInOut,function(){
            $("#background3").fadeIn(timeInOut,function(){
            $("#background2").css("display","none");
            $("#background3").fadeOut(timeInOut);
            });
         });
     }, 1000); // 1000ms,  change to the interval you want.
 });
于 2013-06-03T18:49:19.703 に答える
1

このコードを試してください:

$(document).ready(function(){ 
    window.setInterval(function(){
        $("#background2").fadeIn(timeInOut,function(){
            $("#background3").fadeIn(timeInOut,function(){
                $("#background2").css("display","none");
                $("#background3").fadeOut(timeInOut);
            });
        });
    }, timeInOut*3)
});

タイムアウトを使用せずにこれを行うこともできます：

$(document).ready(function(){
    loopFade()
});

function loopFade(){
    $("#background2").fadeIn(timeInOut,function(){
        $("#background3").fadeIn(timeInOut,function(){
            $("#background2").css("display","none");
            $("#background3").fadeOut(timeInOut, loopFade);
        });
    });
}

background2フェードアウトしながらフェードインすることもできますbackground3。そのためのコードを変更します：

方法 #1:

$(document).ready(function(){ 
    window.setInterval(function(){
        $("#background2").fadeIn(timeInOut,function(){
            $("#background3").fadeIn(timeInOut,function(){
                $("#background2").css("display","none");
                $("#background3").fadeOut(timeInOut);
            });
        });
    }, timeInOut*2)
});

方法 2:

$(document).ready(function(){
    loopFade()
});

function loopFade(){
    $("#background2").fadeIn(timeInOut,function(){
        $("#background3").fadeIn(timeInOut,function(){
            $("#background2").css("display","none");
            $("#background3").fadeOut(timeInOut);
            loopFade()
        });
    });
}
于 2013-06-03T18:50:25.523 に答える
0

.setInterval指定された時間制限の後に関数を呼び出すを使用します。

<script>
var timeInOut = 2000

$(document).ready(function () {

    var fadeFunc = function() {
        $("#background2").fadeIn(timeInOut, function () {
           $("#background3").fadeIn(timeInOut, function () {
               $("#background2").css("display", "none");
               $("#background3").fadeOut(timeInOut);
           });
        });
     });

    setInterval(fadeFunc,1000);
}); 
</script>
于 2013-06-03T18:48:17.217 に答える