如何并行执行两个jquery animate函数

Question

我知道我们可以像这样并行两个 jquery 动画函数

$(function () {
    $("#first").animate({
       width: '200px'
    }, { duration: 200, queue: false });
    $("#second").animate({
       width: '600px'
    }, { duration: 200, queue: false });
});

但我的情况有点不同。 我有一个按钮和一个不透明度设置为零的 div。所以 div 是不可见的。我希望当用户单击一个按钮时，将动态创建一个 div 并将其放置在中心。 center div 的大小会逐渐增加。

所以当动态 div 将被放置在中心时，我需要将我的不可见 div 附加到动态 div 中。现在我想使用动画功能增加动态 div 大小，并且我想将不透明度 1 设置为不可见的子 div。所以我希望这两个动画应该并行运行。

因为当动态 div 调整大小完成时，子 div 的不透明度也会达到 1。用一个小示例指导我如何实现它。

这是我的 js fiddle 链接http://jsfiddle.net/tridip/3jrt48s4/

任何人都可以看到并理解我想如何并行制作两个 div 的动画，这两个 div 的名称如下“UPSContainer”、“UPS_rate_time”谢谢

Answer 1

在您的小提琴中，您将 invisible-div 附加到 dynamic-div 动画的回调函数中的 dynamic-div。这样，只有在动画完成时，不可见的才会变得可见。只需将 invisible-div 从回调中拉出并将其插入主函数中，这样两者就会同时运行。

function toggleUPSOverlay(e) {
    if (!data.isAnimating) {
        if ($els.UPSContainer.is(':hidden')) {
            data.isAnimating = true;
            $els.UPSContainer.show();
            // these actions are pulled off the complete-callback and inserted here
            // they are reversed and .appendTo is used so it looks a bit smoother
            $('.UPS_rate_time').fadeIn(800)).appendTo($els.UPSContainer);
            // now the fadeIn and the animate runs simultaneously
            $els.UPSContainer.animate({/* ... */}, {
                duration: 800,
                /* ... */
                complete: function() {
                    data.isAnimating = false; // the only thing left here
                }
            });
        } else {/* ... */}
    }
}

我希望this FIDDLE 显示你想要的。