使用 JQuery .animate() 在前一个几乎结束时开始？答案

【问题标题】：Using JQuery .animate() to start when the previous ALMOST end?使用 JQuery .animate() 在前一个几乎结束时开始？
【发布时间】：2013-12-09 14:08:10
【问题描述】：

当第一个动画接近尾声时，我正在尝试开始一个新动画。我知道在前一个完全结束后如何开始一个新的：

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

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

【问题讨论】：

标签： jquery jquery-ui jquery-animate

【解决方案1】：

添加延迟，也许？

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

【讨论】：

【解决方案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

【讨论】：