在无限循环中淡入淡出

Question

我在一个类下有不同的元素，我希望它们在无限循环内随机淡入和淡出。我可以让他们现在随机淡入，但坚持淡化元素。

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

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

$(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

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

Answer 3

您可以使用常规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);