1

我有这个小的 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);

和一个小提琴。

顺便说一句：如果您对一般代码改进有任何建议，非常欢迎您告诉我！谢谢你。

4

4 回答 4

3

不要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它非常便宜。

于 2013-11-01T15:49:15.357 回答
1

您可以先定义函数而不是使用匿名函数，然后立即调用它：

function loopWissen() {
    var i = 0;
    var fn = function() { 
        $('.wissenswertes .content').text(wissenArray[i]).fadeIn(1000).delay(3000).fadeOut(1000);
        i++;
        if(i == itemNr) {
            i = 0;
        }
    };
    fn(); // calls it immediately 
    setInterval(fn, 5000);
}
于 2013-11-01T15:41:26.587 回答
0

我个人会稍微清理一下：

function loopWissen() {
    var array = [0, 1, 2, 3];
    (function next(i, a, l) { 
        $('.wissenswertes .content')
             .text(a[i])
             .fadeIn(1000).delay(3000).fadeOut(1000, function () {
                next(++i % l, a, l);
        });
    })(0, array, array.length);
}
于 2013-11-01T15:49:52.610 回答
0

像这样的东西：

$('.wissenswertes').append('<div class="content"></div>');
var wissenArray = [0,1,2,3];
var itemNr = wissenArray.length;
var i = 0;

function loopWissen() { 
   $('.wissenswertes .content').text(wissenArray[i]).fadeIn(1000).delay(3000).fadeOut(1000);
   i++;
   if(i == itemNr) {
       i = 0;
   }
}
setInterval(loopWissen, 5000);
loopWissen();
于 2013-11-01T15:42:51.223 回答