Question

Consider this code…

$(function() {

  for (var i = 0; i < 10; i++) {
    $('body').append('<div style="width: 30px; height: 30px; background: red; margin: 10px;" />')

    }

      $('div').slideUp(1000, function() {

        $('body').append('done sliding');

      });

});

(see it on JSbin)

It creates 10 divs and then slides them up. The callback is called 10 times, when I would prefer it to be called once (after all have finished sliding).

I know I could do a Boolean or something, like hasCalledCallback, but is there any other more elegant way to make multiple elements animating call a completion callback only once?

Answer 1

try this

if ($('div:animated').length == 1)
        $('body').append('done sliding');

demo