Javascript jquery淡入/淡出循环,如何使用计时器? [英] Javascript jquery fade-in/fadeout loop, how to use timer?
问题描述
javascript等新手,尝试使用jquery创建一个用于淡化徽标的循环。
New to javascript and such, trying to create a loop for fading logos using jquery.
我已经让它循环通过它们就好了。但我试图使循环连续;这样,当它到达最后一个标识时,它会回到开头,每次到达最后一个标识时,将我的柜台重置为0。这导致了无限循环,我认为这会使我的浏览器崩溃。所以我做了一个快速谷歌并发现了window.setInterval(...)计时器功能。
I've got it cycling through them just fine. But i tried to make the loop continuous; so that when it reached the last logo it went back to the beginning, by resetting my for-counter to 0 every time it reached the last logo. This resulted in an infinite loop i think that crashed my browser. So i did a quick google and discovered the window.setInterval(...) timer function.
我的问题是,现在解雇循环代码依赖于时间,我无法弄清楚如何计算间隔时间。 For这里引用的是用于淡入和退出徽标的代码(在尝试循环之前):
My problem is, now that firing the looping code relies on timing, i can't figure out how to calculate the interval time. For reference here's the code that fades the logos in and out (before trying to loop it):
$(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);
}
}
});
我试图通过几种方式获得完整循环的时间:
I tried to get the time a complete loop took in a couple of ways:
$(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匹配..
Oh and just in case anyone needs it to understand the javascript, here's the html to match..
<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
。
Simple jQuery approach, no setTimeout
and no 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);
这篇关于Javascript jquery淡入/淡出循环,如何使用计时器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!