在循環中淡入淡出的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>