Run jQuery slideDown complete function only after last item has completed [duplicate]

Question

I understand that you can pass a function to slideUp/slideDown that will run once the transition has completed:

$('li').slideUp({
    complete: function(){
        alert('done');
    }
});

With this HTML an alert is shown 3 times.

<ul>
    <li>[content here]</li>
    <li>[content here]</li>
    <li>[content here]</li>
</ul>

Is there some way to have the complete function fire only once, when the last list item has completed the slideUp? (fiddle)

Answer 1

You can "redo" your selector and check if this is the last :

$('li').slideUp({
    complete: function(){
        if($('li:last').is(this)){
            alert('done');
        }
    }
});

Fiddle : http://jsfiddle.net/5NQsU/

Caching your selector would be even better :

var $li = $('li');
$li.slideUp({
    complete: function(){
        if($li.last().is(this)){
            alert('done');
        }
    }
});

Answer 2

http://jsfiddle.net/Ultimate/KrW5a/

var total = $('ul').size();
var i = 1;
$('li').slideUp({
    complete: function () {
        if (i === total) alert('done');
        i += 1;
    }
});