Execute complete function only once in jQuery animation?

Question

I\'m trying to animate the font size of some text:

$(\"p\").delay(500).animate({
    \"font-size\": \"+=50\"
}, 1000, function() {
    alert(\"Done\");
})​;


        

Answer 1

This code can be used as a generic 'countdown' type of function.

// Function that returns a function,
// which when invoked 'count' number of times,
// will invoke the function 'fn'
function runOnZero (count, fn) {
    return function () {
        if (--count <= 0) {
            fn();
        }
    };
}

// Get all the <p>s
var ps = $("p");

// Do your thing after ps.length calls
var whenAllDone = runOnZero(ps.length, function () {
   alert("Done");
});

ps.delay(500).animate({
    "font-size": "+=50"
}, 1000, whenAllDone)​;

Answer 2

var $p = $("p");
var lastIndex = $p.length - 1;

$p.delay(500).animate({
    "font-size": "+=50"
}, 1000, function() {
    if ($p.index($(this)) == lastIndex) {
        alert("Done");
    }
})

Demo

Answer 3

You could just keep a flag, since they should animate simultaneously:

var done = false;

$("p").delay(500).animate({
    "font-size": "+=50"
}, 1000, function() {
    if(!done) {
        done = true;
        alert("Done");
    }
})​;

Here's a demo.

Answer 4

Give the P-tag in question an ID and select that ID rather than every P tag on the page. Like here: http://jsfiddle.net/LR8uP/1/

Or if you want to animate every P-tag but run the function only once, add a state variable, like here: http://jsfiddle.net/LR8uP/2/

Answer 5

Just to notice, you can also use a promise object:

Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

First example (demo):

$("p").delay(500).animate({
    "font-size": "+=50"
}, 1000).promise().done(function(){
    alert("done");
});​

Second example (demo):

$.when($("p").delay(500).animate({
    "font-size": "+=50"
}, 1000)).done(function(){
    alert("done");
});​