Question

我在一个类下有不同的元素，我希望它们在无限循环中随机地淡入和淡化。我现在可以让它们随机淡化，但是它们会逐渐淡出元素。

另一件事是，在fadeOut之后，我想延迟几秒钟，然后再将它们褪色。

这是我的代码段，希望它会有所帮助。

$(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(); 
    });
});

Answer 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);
}

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

Answer 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);

Answer 3

在其中设置fade_element_in()功能$('.share').fadeIn()和fade_element_out()功能。然后在每个函数中使用Javascript的setInterval函数在您首选延迟后调用其他函数。中提琴，无限循环。

fadeIn和fadeOut在无限循环内

3 个答案: