Javascript jquery fade-in/fadeout loop，如何使用计时器

Javascript jquery fade-in/fadeout loop, how to use timer?

本文关键字：何使用 计时器 loop fadeout jquery fade-in Javascript      更新时间：2023-09-26

javascript等的新手，尝试使用jquery为淡入淡出的徽标创建一个循环。

我已经让它在他们之间循环了。但我试图使循环连续;这样当它到达最后一个徽标时，它就会回到开头，方法是每次到达最后一个徽标时将我的 for-counter 重置为 0。这导致了一个无限循环，我认为这让我的浏览器崩溃了。所以我做了一个快速的谷歌，发现了window.setInterval（...） 定时器功能。

我的问题是，现在触发循环代码依赖于计时，我无法弄清楚如何计算间隔时间。作为参考，以下是淡入和淡出徽标的代码（在尝试循环之前）：

$(document).ready(function (){
    var fadeDuration = 1000;
    var timeBetweenFade = 2000;
    var totalTimePerChange = fadeDuration + timeBetweenFade;
    var totalLogos = $('.logo').length;
    var currentLogo;
    var i;
        for(i = 0; i < totalLogos; i++)
        {
            currentLogo = "#img" + i;
            if(i == 0){
                $(currentLogo).fadeIn(fadeDuration).delay(timeBetweenFade).fadeOut(fadeDuration);
                }
            else{ //general case
                $(currentLogo).delay(totalTimePerChange * i).fadeIn(fadeDuration).delay(timeBetweenFade).fadeOut(fadeDuration);
            }
        }
});

我试图通过几种方式获得一个完整循环的时间：

$(document).ready(function (){
    //..declarations..
    window.setInterval( function() {
        //..FOR LOOP HERE..
    }, i*(fadeDuration + timeBetweenFade + fadeDuration));
});
//I also tried..
$(document).ready(function (){
    //..declarations..
    var timeTakenToLoop;
    var startLoopTime;
    window.setInterval( function() {
    startLoopTime = new Date().getTime();
        //...FOR LOOP HERE..
    timeTakenToLoop = new Date().getTime() - startLoopTime;
    }, timeTakenToLoop);
});

但是在这两种情况下，我都会得到徽标开始重叠，因为函数调用时间错误。有经验的人可以建议最好的方法是什么吗？

哦，以防万一有人需要它来理解javascript，这里是匹配的html。

    <div id="img0" class="logo">
    <img src="{% static "CSS/Images/phone_icon.gif" %}"/>
    </div>
    <div id="img1" class="logo">
    <img src="{% static "CSS/Images/email_icon.gif" %}"/>
    </div>
    <div id="img2" class="logo">I can fade too</div>

简单的jQuery方法，没有setTimeout也没有setInterval。

var loop = function(idx, totalLogos) {
  var currentLogo = "#img" + idx;
  $(currentLogo)
    .delay(currentLogo)
    .fadeIn(fadeDuration)
    .delay(currentLogo)
    .fadeOut(fadeDuration, function(){
      loop( (idx + 1) % totalLogos, totalLogos);
    });
}
loop(0, $('.logo').length);​

在这里看到它。

相关文章：