同时执行多个动画函数

Question

一段时间以来，我一直在寻找我的问题的答案，但找不到。希望你能帮助我。

情况

我是 Javascript + JQuery 的新手。所以我的知识仅限于我可以在互联网上找到的东西（尤其是这个网站）。

我正在尝试创建一个具有更改选项卡想法的网站，我使用 jQuery 的动画功能自动切换这些选项卡。为了好看，浏览器需要同时执行多个动画功能

代码

$(slider).animate({opacity: 0},setSpeedTime);
$(backslider).animate({opacity: 1},setSpeedTime);
$('.subdiv_' + lastNumber).animate({backgroundColor: '#FFF'},setSpeedTime);
$('.subdiv_' + imageNumber).animate({backgroundColor: '#F00'},setSpeedTime);
$("#" + colId).animate({borderColor: "#000"},setSpeedTime);
$("#" + lastColId).animate({borderColor: "#FFF"},setSpeedTime);
$("#" + colId).animate({opacity: "1"},setSpeedTime);
$("#" + lastColId).animate({opacity: "0.25"},setSpeedTime);

说明

slider 和 backslider 是 bannerdiv 的变量。它们相互重叠，新横幅通过另一面可见。

滑块和后退滑块旁边是 3 个按钮，其中 class 以 subdiv_ 开头，以横幅编号（1,2 或 3）结尾。单击此按钮时，横幅将立即转到相应的横幅。

colId 是正在显示的列的新 ID。
lastColId 是当前显示的列的 ID。

问题

现在是问题。几乎每个动画函数都同时运行，除了最后 2 个。

效果

横幅正在更改，当前横幅的按钮正在更改颜色以及旧横幅按钮的颜色。旧列的边框消失，新列的边框出现。

这一切都是同时发生的，就像我希望它发生的那样。但是旧专栏的文字仍然非常明显，而新专栏则保持透明。只有在所有其他效果完成后，文本 div 的不透明度才会改变。所以文本留在其他动画后面。

问题

为什么每个动画都同时运行，我该如何解决？是否有最多可以同时执行的动画数量？

尝试过

我已经尝试在 animate 中使用队列选项，但是将所有动画队列设置为 false 会给我带来另一个错误的效果。前两个动画函数在没有持续时间选项的情况下立即处理（似乎持续时间设置为 0）。

Answer 1

Almost every animate function is being run simultaneously, except for the last 2.

没错。当您在同一元素上多次调用 animate 时，jQuery 会序列化动画。

对每个元素使用单个 animate 调用以便运行同时对该元素产生影响：

$("#" + colId).animate({
    borderColor: "#000",
    opacity: 1
},setSpeedTime);
$("#" + lastColId).animate({
    borderColor: "#FFF",
    opacity: 0.25
},setSpeedTime);

旁注：在 opacity.

中使用数字，而不是字符串

同时执行多个动画函数

simultaneously execute multiple animate functions

jquery

animation

simultaneous

情况

代码

说明

问题

效果

问题

尝试过