在循环中淡入淡出的div

Question

我已经查看了与我的所有其他类似或相同的问题，但仍无法找到所需的信息。我对jquery仍然陌生，但我想要的是我的三个div在循环中，当它们改变时淡入淡出。我看到的是人们使用的速度很快，第一个div也淡入淡出，其余的都会随之而来，但我希望第一个div在页面加载时才存在，然后在一段时间后切换。这里是我的html

<div id="Reviews"> 
    <div class="Review1"> 
     <p>Customer Review 1</p> 
     <span class="CustomerName">- Bob</span> 
    </div> 
    <div class="Review2"> 
     <p>Customer Review 2</p> 
     <span class="CustomerName">- Mary</span> 
    </div> 
     <div class="Review3"> 
     <p>Customer Review 3</p> 
     <span class="CustomerName">- Jess</span> 
    </div> 
</div> 

现在我有单独的类他们，但我宁愿设立查询淡入和淡出通过使用“#Reviews格”这样的事情打电话，但改变的类名如果需要使用淡入/淡出工作，div可以。我希望只是在需要的时候添加评论，并且只会根据类名称进行调整，或者仅仅通过作为div进行调整。我也看到编码会淡化我的div，但下面的div会显示在当前的div下面，然后当前的会消失，并且随后上移，因为我希望它保持垂直对齐顶部只是淡入和而在一个循环，所以它总是回到第一个，然后再去。我认为这会更容易做，但显然不是。我试过使用从其他问题中看到的编码，但我无法找到我正在寻找的具体内容。

Answer 1

如果你想淡入淡出，并在循环中的所有div的。你可以做以下

检查这个片段

$(document).ready(function() { 
 

 
    setInterval(function() { 
 
    fadeinOut(); 
 
    }, 1000) 
 
}); 
 
var count = -1; 
 

 
function fadeinOut() { 
 
    var reviews = $('#Reviews div'); 
 
    var reviewLength = reviews.length - 1; 
 

 
    count < reviewLength ? count++ : count = 0; 
 
    reviews.fadeOut().delay(2000).eq(count).fadeIn().addClass('top'); 
 
}

#Reviews div {} #Reviews { 
 
    position: relative; 
 
} 
 
#Reviews div:not(.Review1) { 
 
    display: none; 
 
} 
 
.top { 
 
    display: block; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Reviews"> 
 
    <div class="Review1"> 
 
    <p>Customer Review 1</p> 
 
    <span class="CustomerName">- Bob</span> 
 
    </div> 
 
    <div class="Review2"> 
 
    <p>Customer Review 2</p> 
 
    <span class="CustomerName">- Mary</span> 
 
    </div> 
 
    <div class="Review3"> 
 
    <p>Customer Review 3</p> 
 
    <span class="CustomerName">- Jess</span> 
 
    </div> 
 
</div>

希望它可以帮助

Answer 2

下面是使用jQuery和"slick" carousel plugin的快速实现。运行下面的演示来看看它的实际运行情况。

$(document).ready(function() { 
 
    $('#Reviews').slick({ 
 
    fade: true, // change transition from slide to fade 
 
    autoplay: true, // autoplay the slideshow so no interaction needed 
 
    arrows: false // remove the default Prev/Next arrrows 
 
    }); 
 
});

<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css" /> 
 

 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
 

 
<script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script> 
 

 
<div id="Reviews"> 
 
    <div class="Review1"> 
 
    <p>Customer Review 1</p> 
 
    <span class="CustomerName">- Bob</span> 
 
    </div> 
 
    <div class="Review2"> 
 
    <p>Customer Review 2</p> 
 
    <span class="CustomerName">- Mary</span> 
 
    </div> 
 
    <div class="Review3"> 
 
    <p>Customer Review 3</p> 
 
    <span class="CustomerName">- Jess</span> 
 
    </div> 
 
</div>

Answer 3

如果你想这样做的纯CSS，你可以做到这一点，利用@keyframes

该解决方案是非常具体的用例。有3格和3秒的可见度。

您可以在一个循环中显示所有div的时间X秒。

给每个div分享X并重复动画。

为了简单起见，我将X定义为6秒，因此您的每个审阅div都会获得3秒的时间。

如果您正在寻找灵感，要自行实施，希望这可以成为您的出发点。

.reviews { 
 
    position: relative; 
 
} 
 
.review { 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    animation-duration: 6s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 
.review-1 { 
 
    animation-name: reviewOne; 
 
    color: red; 
 
} 
 
.review-2 { 
 
    animation-name: reviewTwo; 
 
    color: blue; 
 
} 
 
.review-3 { 
 
    animation-name: reviewThree; 
 
    color: green; 
 
} 
 
@keyframes reviewOne { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    32% { 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0 
 
    } 
 
} 
 
@keyframes reviewTwo { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    32% { 
 
    opacity: 0; 
 
    } 
 
    33% { 
 
    opacity: 0.5; 
 
    } 
 
    34% { 
 
    opacity: 1; 
 
    } 
 
    65% { 
 
    opacity: 1; 
 
    } 
 
    66% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0 
 
    } 
 
} 
 
@keyframes reviewThree { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    65% { 
 
    opacity: 0; 
 
    } 
 
    66% { 
 
    opacity: 0.5; 
 
    } 
 
    67% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<div id="reviews"> 
 
    <div class="review review-1"> 
 
    <p>Customer Review 1</p> 
 
    <span class="CustomerName">- Bob</span> 
 
    </div> 
 
    <div class="review review-2"> 
 
    <p>Customer Review 2</p> 
 
    <span class="CustomerName">- Mary</span> 
 
    </div> 
 
    <div class="review review-3"> 
 
    <p>Customer Review 3</p> 
 
    <span class="CustomerName">- Jess</span> 
 
    </div> 
 
</div>