如何在淡出的循环jQuery中显示最后一个div



我有jQuery代码,在我使用settimeout显示和隐藏我的div中,以便它可以显示给定的数据,但是我需要显示,而不是隐藏最后一个div的任何想法这个怎么做 ?附在这里是我的代码

JS代码

$(function() {
        // Start showing the divs
         //showDiv();
         showDiv2();
    });

function showDiv2() {
    // If there are hidden divs left
    if($('.forSlowMo:hidden').length) {
        // Fade the first of them in
        $('.forSlowMo:hidden:first').fadeIn();
        $( ".forSlowMo" ).fadeOut( 1500, function() {});
        // And wait one second before fading in the next one
        setTimeout(showDiv2, 100);
    }
 }
$(function() {
    // Start showing the divs
     //showDiv();
     showDiv2();
});

function showDiv2() {
// If there are hidden divs left
if($('.forSlowMo:hidden').length) {
    // Fade the first of them in
    $('.forSlowMo:hidden:first').fadeIn();
    if($('.forSlowMo:hidden').length > 1)
        $( ".forSlowMo" ).fadeOut( 1500, function() {});
    // And wait one second before fading in the next one
    setTimeout(showDiv2, 100);
}

}

这可以是您的答案吗?

customfadeOut($('.forSlowMo').first())
  
function customfadeOut(element) {
  if (element.length) {
    element.fadeOut({
      duration: 1500,
      easing: 'linear',
      done: function() {
        customfadeOut(element.next('.forSlowMo'));
      }
    });
  }
}
.forSlowMo {
  margin-bottom: 25px;
  padding: 25px 5px;
  border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="forSlowMo">first content</div>
<div class="forSlowMo">second content</div>
<div class="forSlowMo">third content</div>
<div class="forSlowMo">fourth content</div>

最新更新