Question

当第一个动画接近他的结尾时，我正在尝试开始一个新动画。我知道当前一个完全结束时我怎么能开始一个新的：

$("#clickme").click(function () {
    $("#book").animate({
        opacity: 0.25,
        left: "+=50",
        height: "toggle"
    }, 5000, function () {
        // Animation complete.
    });
});

所以如果动画花了5秒钟而不是在3秒内开始第二个动画（或类似的东西）

Answer 1

添加延迟，可能吗？

$("#book").animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
}, 5000).delay(3000).fadeOut();

Answer 2

获得一点花哨的声音并创建一个自定义动画方法，让您在调用回调之前指定延迟，而不是在动画完成后调用它。
它仍然基于动画的完成，因此它比仅使用超时更可靠。

$.fn.Ani = function(props, duration, callback, delay_callback) {
    return (function(elem) {
        var calledBack = false;
        return elem.animate(props, {
            progress: function(o, elapsed) {
                var per = (delay_callback / duration).toFixed(2),
                    ela = elapsed.toFixed(2);

                if (ela > per && !(calledBack)) {
                    calledBack = true;
                    callback(ela);
                }
            },
            duration: duration
        });
    })(this);
}

您可以像以下一样使用它：

$("#clickme").click(function () {
    $("#book").Ani({
        opacity: 0.25,
        left: "+=50",
        height: "toggle"
    }, 5000, function(triggered_at) { // animation duration  = 5000
        console.log(triggered_at) // shows the percentage when callback triggered
    }, 3000); // delay before triggering callback = 3000
});

FIDDLE

使用JQuery .animate（）在上一次ALMOST结束时启动？

2 个答案: