CODEWITHSUNDEEP
jqueryanimationcallback
aboutjquery
aboutjquery

Reputation: 922

multiple jquery animate finish callback

the function look like this, i use jquery animate function try, but i think css transition can do this too :)

$('a').on('click', function() { // click menu
  $('.animate_item').each(function() {
    $(this).fadeOut(fade_out_delay, function(){ // alot of animate_item start fadeout, delay time from html value data-delay
      $('.another_animate_item').each(function() { // after animate_item all fadeout, alot of another_animate_item fadein
        $(this).fadeIn(fade_in_delay);
      });
    });
  });
});

each animate item have they delay time, how to detect if all of animate item fadeout complete and do a callback?

i am thinking about...

manual set a longer function delay time maybe work, but it is manual :(

get the maximum of data-delay time of animate item, and auto set a function delay maybe better?

or other smart method ?

thanks so much :)

Upvotes: 1

Views: 92

Answers (1)

guest271314
guest271314

Reputation: 1

Try

    $('a').on('click', function() { // click menu
      var len = $('.animate_item').length;
      $('.animate_item').each(function(i, el) {
        // alot of animate_item start fadeout, 
        // delay time from html value data-delay
        $(this).fadeOut($(this).data("delay"), function() { 
          if (i === len - 1) {
            console.log("abc")
            // do stuff
          }
          // after animate_item all fadeout, 
          // alot of another_animate_item fadein
         // $('.another_animate_item').each(function() { 
         //   $(this).fadeIn(fade_in_delay);
         // });
        });
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<a>click</a>
<div class="animate_item" data-delay="1000">a</div>
<div class="animate_item" data-delay="1000">b</div>
<div class="animate_item" data-delay="1000">c</div>

Upvotes: 1

Related Questions