如何使用 JavaScript 连续循环 Jquery 块答案

【问题标题】：How to continuously loop a block of Jquery using JavaScript如何使用 JavaScript 连续循环 Jquery 块
【发布时间】：2013-05-30 00:19:31
【问题描述】：

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

提前致谢，史蒂夫

【问题讨论】：

setInterval(function(){},毫秒);
How to make a jquery infinite animation? 的完全相同的副本

标签： javascript jquery loops background

【解决方案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.
 });

【讨论】：

【解决方案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()
        });
    });
}

【讨论】：

非常感谢。我的语法不太正确。您忘记了 setInterval 中的“n”，我将间隔时间设置为 timeInOut*3+500，使其运行更顺畅。再次感谢

【解决方案3】：

使用.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>

【讨论】：