jQuery FadeIn / FadeOut每个元素 [英] jQuery FadeIn/FadeOut each element sequently

问题描述

我的网站上有引号，我想一次显示一个

 < div class = > 
< p> Quote1< / p> 
< p> Quote2< / p> 
< p> Quote3< / p> 
< p> Quote4< / p> 
< / div> 
 

页面加载后，我想要第一个可见和淡出，让我们说，2秒延迟，下一个出现在后面，然后第二个在延迟后淡出等等。
我知道如何使用CSS，但需要更高效的东西，整个事情必须无限重复。
谢谢！

解决方案

这是你如何循环你的报价（调整动画的持续时间） / p>



  var $ quotes = $（'。quotes p'），index = 0; $ quotes.eq（index ++）。fadeIn （2000）.fadeOut（function next（）{$ quotes.eq（index ++％$ quotes.length）.fadeIn（）。delay（2000）.fadeOut（next）;}）;  pre> 
  .quotes p {padding：20px; background-color：＃C1C3D2; display：none;}  
 
 < script src = ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =quotes> < p> Quote1< / p> < p> Quote2< / p> < p> Quote3< / p> < p> Quote4< / p>< / div>  
 

i have quotes on my site that I want to show up one at a time

<div class="quotes">
    <p>Quote1</p>
    <p>Quote2</p>
    <p>Quote3</p>
    <p>Quote4</p>
</div>

After page loads I want the first one to be visible and fade after, lets say, 2 seconds of delay, and next one appear right after, then second one fade out after delay and so on. I know how to do that with just CSS, but need something more efficient and the whole thing has to repeat infinitely. Thank you!

解决方案

This is how you can cycle your quotes (adjust animation duration to your taste):

var $quotes = $('.quotes p'),
    index = 0;

$quotes.eq(index++).fadeIn().delay(2000).fadeOut(function next() {
    $quotes.eq(index++ % $quotes.length).fadeIn().delay(2000).fadeOut(next);
});

.quotes p {
    padding: 20px;
    background-color: #C1C3D2;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="quotes">
    <p>Quote1</p>
    <p>Quote2</p>
    <p>Quote3</p>
    <p>Quote4</p>
</div>

这篇关于jQuery FadeIn / FadeOut每个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！