Jquery 如何同时设置多个元素的动画？

我正在制作一个标题动画，当类

collapseTest

用JS添加到标题中时。我已经这样做了，你可以在这里看到一个活生生的例子：

不幸的是，当您查看我的实时代码时，您将看到菜单所在的左侧部分与它们旁边的绿色栏底部的动画不同时。我想同时设置底部、菜单方块和绿色块的动画。这可能吗？我怎样才能做到这一点

对于动画，我使用了css转换属性：

-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;

我已经玩过了菜单块和它的其余部分（菜单旁边的白色和绿色条）的过渡的

持续时间

，但我无法让它同步动画

我在菜单上添加了这些动画，当使用JS将class

collapseTest

添加到header元素时，顶部的白色条和下面的绿色条：

function explode() {
    $('header').addClass('collapseTest');
};

setTimeout(explode, 800);

css声明的一个示例：

#header.collapseTest .toggle-menu {
    -webkit-transition: all 0.81s ease-in-out 0s;
    -moz-transition: all 0.81s ease-in-out 0s;
    -o-transition: all 0.81s ease-in-out 0s;
    transition: all 0.81s ease-in-out 0s;
}

如果有任何问题，请在下面留下评论。

---

提前感谢您抽出时间。

我已经修改了您的课程

#header.collapseTest .top {
height: 0;
margin: -1px;

-webkit-transition: all 0.935s ease-in-out 0s;
-moz-transition: all 0.935s ease-in-out 0s;
-o-transition: all 0.935s ease-in-out 0s;
transition: all 0.935s ease-in-out 0s;
}

由于不同值的过渡完成时间相同，因此我们可以通过降低一个元素的速度来调整速度

或

我们可以通过在一个元素内部开发一个结构并在父元素上应用转换来实现这一点，这样子元素在转换时会看起来很棒。谢谢，我找到了解决办法

你会发现这很难相信，但在过渡过程中似乎存在一个问题。不知何故，如果你把

%

和

像素混为一谈，这种转换似乎是同时进行的（尽管它仍然是同步的）

我的意思是，在你的导航上，你可以设置高度动画，在
div.bottom
上也是如此，问题是其中一个有基于像素的高度，而另一个有基于
%
的高度。因此，要获得您想要的，即两个元素应以相同的方式设置动画，请将两个元素的高度更改为基于像素或
%
的

更改以下样式：

#header > div {
    height: 50%;  // see how this is percentage based 
    width: calc(100% - 180px)!important;
    padding-left: 26px;
    display: table;
} 

致：

你能包括一个现场演示吗？所以其他人可以看到解决问题的有效方法。希望它能帮助您。只需将您的持续时间更改为：
0.779s
。现在，它将几乎与其余元素同步设置动画。Thanks@Caspert，我不确定手动编辑翻译是否可行，请检查我的答案！我已经试过了，但是右边的部分比菜单块收缩得快，这就是我的问题。它应该是同步动画。@Caspert找到了解决方案！检查我编辑的答案！
#header > div {
    height: 75px;  // 75px is = 50% in your case, might hurt responsive design !!
    width: calc(100% - 180px)!important;
    padding-left: 26px;
    display: table;
}