Run jQuery slideDown complete function only after last item has completed

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)

I could technically of course, but the effect is quite different @AndréPena — Wesley Murch, Jul 17 '13 at 20:05
Check out this question: http://stackoverflow.com/questions/8793246/jquery-animate-multiple-elements-but-only-fire-callback-once — Matt Cain, Jul 17 '13 at 20:06
@tymeJV However, I want *all* list items to slideUp. Can you suggest something? — Wesley Murch, Jul 17 '13 at 20:07
@Shawn31313 Yes they do, as the `duration` argument is the same for all list items. I'm looking for a way to run a function when they have all completed ("last one" may have been a poor choice of words). — Wesley Murch, Jul 17 '13 at 20:08
Just use that same complete function as they will all be completed at the same time. Am I missing something? — Shawn31313, Jul 17 '13 at 20:09
@Shawn31313 -- The complete function fires 3 times, since each `li` runs its own complete function. — tymeJV, Jul 17 '13 at 20:09

Karl-André Gagnon · Accepted Answer · 2013-07-17T20:13:19.810

17

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');
        }
    }
});

edited Jul 17 '13 at 20:13

answered Jul 17 '13 at 20:07

Karl-André Gagnon

33,662
5
50
75

`.is(this)`...damnit, I was trying to remember this, +1 – tymeJV Jul 17 '13 at 20:09
Brilliant, thanks, will accept as soon as the system allows me. I suppose this would work just the same with `:first`, right? Since they all complete at the same time? I guess I could even have used a `isCompleted` flag or something now that I think of it... – Wesley Murch Jul 17 '13 at 20:09
@WesleyMurch It should work as well :) – Karl-André Gagnon Jul 17 '13 at 20:11

score 2 · Answer 2 · edited Jul 17 '13 at 20:11

2

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

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

edited Jul 17 '13 at 20:11

Shawn31313

5,978
4
38
80

answered Jul 17 '13 at 20:07

PaulBGD

2,018
5
22
30

Karl's is better, just ignore this. – PaulBGD Jul 17 '13 at 20:08

Run jQuery slideDown complete function only after last item has completed

2 Answers2