在jQuery动画中只执行一次完整的功能？

Question

我正在尝试为某些文本的字体大小设置动画：

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

Here's a demo.

我想在为<p>s（在示例中为alert）设置动画后做一些事情，但令人惊讶的是它会为每个<p> 运行它，这不是我想要的。有没有办法让它只运行一次还是不可能？

Answer 1

请注意，您也可以使用promise object：

返回一个 Promise 对象以观察某个类型的所有操作何时发生 绑定到集合，无论是否排队，都已完成。

第一个示例 (demo)：

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

第二个例子 (demo)：

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

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

你可以只保留一个标志，因为它们应该同时动画：

var done = false;

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

Here's a demo.

Answer 4

为有问题的 P 标记指定一个 ID，然后选择该 ID，而不是页面上的每个 P 标记。喜欢这里：http://jsfiddle.net/LR8uP/1/

或者，如果您想为每个 P-tag 设置动画但只运行一次函数，请添加一个状态变量，如下所示：http://jsfiddle.net/LR8uP/2/

Answer 5

此代码可用作通用“倒计时”类型的函数。

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