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](http://jsbin.com/etoqu/edit))

It creates 10 `div`s 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](http://jsbin.com/etoqu/2/edit) or something, like `hasCalledCallback`, but is there any other more elegant way to make multiple elements animating call a completion callback only once?

Answer: 
try this

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

```

[demo](http://jsbin.com/etoqu/3/)
=================================
One possibility is to use setTimeout:

```
$(function() {

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

  var timerid;
  $('div').slideUp(1000, function() {
    clearTimeout(timerid);
    timerid = setTimeout(function() {$('body').append('done sliding')}, 100);
  });
});

```

To actually avoid calling the callback multiple times, only add it to the last div:

```
$(function() {

  var lastDiv, otherDivs = [];
  for (var i = 0; i < 10; i++) {
    div = $('<div style="width: 30px; height: 30px; background: red; margin: 10px;" />');
    $('body').append(div);
    if(i == 9) lastDiv = div;
    else otherDivs.push(div);
  }

  $.each(otherDivs, function(index, val) {
    val.slideUp(1000);
  });
  lastDiv.slideUp(1000, function() {
    $('body').append('done sliding');
  });
});

```

You could do that last part without the lastDiv and otherDivs variables by adding classes to the divs and selecting on those.