如何在fadeout循环中显示最后一个DIV Jquery

时间:2017-06-01 06:36:44

标签: javascript jquery

我有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);
    }

 }

2 个答案:

答案 0 :(得分:2)

$(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);
}

}

答案 1 :(得分:1)

这可能是你的答案吗?

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>