如何使用 JavaScript 连续循环 Jquery 块

Posted 2023-05-08

【中文标题】如何使用 JavaScript 连续循环 Jquery 块

【英文标题】：How to continuously loop a block of Jquery using JavaScript

【发布时间】：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? 的完全相同的副本

【参考方案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>