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 done = false;

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

Here's a demo.

Answer 3

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 4

为有问题的P-tag提供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);

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

5 个答案: