循環淡入淡出的Divs

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將顯示在當前div的下面，然后當前的div將消失，隨后的div向上移動，在這里我希望它保持垂直對齊，頂部只是淡入並在循環中時，它總是返回到第一個，然后再返回。 我認為這樣做會更容易，但顯然並非如此。 我嘗試從其他問題中看到的內容使用編碼，但我只是找不到我想要的東西。

Answer 1

如果要在純CSS中執行此操作，可以使用@keyframes進行

該解決方案非常適合用例。 具有3 div和3秒的可見度。

您可能需要X秒的時間才能使所有div在一個周期中顯示一次。

給每個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> 

Answer 2

如果要在循環中淡入和淡出所有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 3

這是使用帶有“ slick”輪播插件的 jQuery的快速實現。 運行下面的演示以查看實際操作。

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