Martney Acha
Martney Acha

Reputation: 3002

How to Show the last DIV in fadeout loop Jquery

I have Jquery code where in I use setTimeout to display and hide my divs so it can display the given data, but what I need is to display and not to hide the last Div any idea how to do this ? attached here is my code

JS Code

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

 }

Upvotes: 2

Views: 61

Answers (2)

UfguFugullu
UfguFugullu

Reputation: 2147

Could this be your answer?

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>

Upvotes: 1

Furquan Khan
Furquan Khan

Reputation: 1594

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

}

Upvotes: 2

Related Questions