Execute complete function only once in jQuery animation?

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

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

Here's a demo.

I want to do something after animating the <p>s, which in the example is alert, but it surprisingly runs it for each <p>, and that's not what I want. Is there a possible way to make it just run once or is it not possible?

Answers:

Answer
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

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");
});?
Answer

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

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

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)?;

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.