使用JQuery.animate（）在上一个任务即将结束时开始？

当第一部动画即将结束时，我正在尝试开始一部新的动画。 我知道如何在前一个任务完全结束后开始新的任务：

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

因此，如果动画比在3秒内开始第二个动画要花5秒（或类似的时间）

添加延迟，可能吗

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

---

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

$.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
});