2017-06-01 80 views
2

我有jQuery代碼,其中我使用setTimeout來顯示和隱藏我的div,因此它可以顯示給定的數據,但我需要的是顯示並不隱藏最後一個Div任何想法如何做到這一點?附在這裏是我的代碼
如何顯示淡出循環中的最後一個DIV jquery

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

} 
+0

可以創建一個小的jsfiddle所以我們可以嘗試一些解決方案? – UfguFugullu

+0

請分享HTML,以更好地理解您的問題。另外,如果可能的話,創建一個jsFiddle。 –

+0

嗨,這是@MilanChheda https://jsfiddle.net/6mhk7g6b/ –

回答

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

}

+0

感謝這!它的作品就像魔法般的節省時間! @furquan –

+0

歡迎你 –

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>

相關問題