我有这个小的 jquery 代码,我希望数组的内容以一定的延迟平滑地淡入淡出,最后再次从第一个数组项重新启动。
它工作正常,但不幸的是,函数在开始显示第一个条目之前等待 5000 毫秒的时间间隔。我想立即开始。有谁知道我可以做到这一点?
这是我的代码:
$('.wissenswertes').append('<div class="content"></div>');
var wissenArray = [0, 1, 2, 3];
itemNr = wissenArray.length;
function loopWissen() {
var i = 0;
setInterval(function () {
$('.wissenswertes .content').text(wissenArray[i]).fadeIn(1000).delay(3000).fadeOut(1000);
i++;
if (i == itemNr) {
i = 0;
}
}, 5000);
}
$(loopWissen);
和一个Fiddle .
顺便说一句:如果您对一般代码改进有任何建议,非常欢迎您告诉我!谢谢。
最佳答案
不要为此使用 setInterval
。它很脆弱,因为您依赖于与其他定时代码一致对齐的间隔。
我会在 fadeOut(1000)
之后调用该函数。
$('.wissenswertes').append('<div class="content"></div>');
var wissenArray = [0, 1, 2, 3];
function loopWissen() {
var i = 0;
(function loop() {
$('.wissenswertes .content').text(wissenArray[i])
.fadeIn(1000)
.delay(3000) // v---next loop after fadeOut
.fadeOut(1000, loop);
i = ++i % wissenArray.length;
}());
}
$(loopWissen);
我还缩短了您的 i
递增代码。您的方式绝对没问题,但这只是更简洁一点。
还删除了 itemNr
,因为获取 .length
非常便宜。
关于javascript - jQuery 等待直到第一个间隔,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19730068/