无限循环中的fadeIn和fadeOut答案

【问题标题】：fadeIn and fadeOut within an infinite loop无限循环中的fadeIn和fadeOut
【发布时间】：2012-08-07 04:03:32
【问题描述】：

我在一个类下有不同的元素，我希望它们在无限循环中随机淡入和淡出。我现在可以让它们随机淡入，但在淡出元素时卡住了。

另一件事是，在淡出之后，我想延迟几秒钟，然后再将它们淡入。

这是我的代码 sn-p，希望对您有所帮助。

$(document).ready(function () {
    $('.share').each(function(i){
        var rand = 1 + Math.floor(Math.random() * 7);//max of random 7 seconds
        $(this).fadeIn(rand*1000).delay(500).fadeOut(); 
    });
});

【问题讨论】：

如果您的问题有很好的答案，请点击最佳答案旁边的复选标记。
欲知详情：meta.stackexchange.com/questions/16721/…
各位小伙伴们别着急，及时赶上声望点。谢谢:)

标签： jquery html css

【解决方案1】：

如果你希望渐变之间的间隔也随机化，你可以使用这个：

$('.share').each(function(i) {
    loopInfinitely($(this));
});

function loopInfinitely(elem) {
    var rand = 1 + Math.floor(Math.random() * 7) * 1000;//max of random 7 seconds
    setTimeout(function() {
        elem.fadeIn(rand).delay(300).fadeOut(rand);
        loopInfinitely(elem);  
    }, rand);
}

如果您还希望元素按顺序出现和消失，可以使用以下命令：

loopInfinitely($('.share'));

function loopInfinitely(elems) {
    var rand = 1 + Math.floor(Math.random() * 7) * 1000;//max of random 7 seconds
    setTimeout(function() {
        var i = 0;
        (function advanceElem() {
            if (elems.length <= i) {
                loopInfinitely(elems);
                return;
            }
            elems.eq(i).fadeIn(rand).delay(300).fadeOut(rand);
            setTimeout(advanceElem, rand*2+300);
            i++;
        })();
    }, rand);
}

让我知道这是如何工作的。

【讨论】：

我试过你的代码，它给了我未捕获的类型错误：无法调用未定义的fadeIn，我做错了什么吗？
@ocinisme - 不，我在我的代码中发现了一个错误（只有第一个调用被传递了元素）。再试一次。
谢谢老兄，成功了。顺便说一句，我怎样才能调整淡入和淡出速度，使其看起来像元素正在出现并且很好地一一丢失？
@ocinisme - 编辑答案以显示如何。让我知道它是否有效。
@ocinisme - 抱歉，我忘记了 jQuery 动画的异步特性。我已经更新了代码。这将希望起作用。我还注意到随机时间在 1 到 7 毫秒而不是秒之间，所以我将其更改为 1 到 7 秒。

【解决方案2】：

您可以使用常规 JavaScript 计时器定期调用您的代码。

setInterval(function() 
    { 
        $('.share').each(function(i) 
        {
             var rand = 1 + Math.floor(Math.random() * 7);//max of random 7 seconds
             $(this).fadeIn(rand*1000).delay(500).fadeOut(); 
        }) 
    },  3000);

【讨论】：

我会避免在异步调用中使用setInterval。根据我的经验，它总是在某个时候反击。

【解决方案3】：

创建一个带有$('.share').fadeIn() 的fade_element_in() 函数和一个fade_element_out() 函数。然后在每个函数中使用 Javascript 的 setInterval 函数在您喜欢的延迟后调用另一个函数。中提琴，无限循环。

【讨论】：