javascript - 如何使用 JavaScript 连续循环 Jquery 块

Question

我在 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>

在此先感谢，史蒂夫

Answer 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.
 });

Answer 2

试试这个代码：

$(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()
        });
    });
}

Answer 3

使用.setIntervalwhich 在指定的时间限制后调用该函数。

<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>