同时执行多个动画功能

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个按钮，其中类以subdiv_开头，以bannernumber（1,2或3）结束。单击此按钮时，横幅将立即转到相应的横幅。

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

问题

现在问题。几乎每个动画功能都是同时运行的，除了最后一个。

效果

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

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

问题

为什么，以及如何解决它，以便每个动画同时运行？是否可以同时执行最大数量的动画？

试过

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

Answer 1

  

除了最后的2个，几乎每个动画功能都在同时运行。

右。当您在同一元素上多次调用animate时，jQuery会对动画进行序列化。

对每个元素使用单个 animate调用，以便同时对该元素运行效果：

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

---

附注：使用数字，而不是字符串，使用opacity。