javascript - Execute complete function only once in jQuery animation? - Stack Overflow

admin管理员组

文章数量:1277895

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?

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?

• javascript
• jquery

Share Improve this question Follow edited Feb 19, 2012 at 22:54 Michael Petrotta 61k2727 gold badges152152 silver badges181181 bronze badges asked Feb 19, 2012 at 22:46 Derek 朕會功夫Derek 朕會功夫 94.4k4545 gold badges197197 silver badges253253 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 10

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

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

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.

Give the P-tag in question an ID and select that ID rather than every P tag on the page. Like here: http://jsfiddle/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/LR8uP/2/

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

本文标签： javascriptExecute complete function only once in jQuery animationStack Overflow