出于某种原因,当尝试同时为两个元素设置动画时(基于最大高度),转换总是一次发生一个,第一个元素,当它完成它的转换时,另一个元素开始转换。 请看这个例子,我已经在js bin上构建了这个现象。
setTimeout(function () {
$(".b").css("max-height", "500px");
}, 500);
setTimeout(function () {
$(".b").css("max-height", "0");
$(".c").css("max-height", "500px");
}, 2000);
http://jsbin.com/riperifoku/edit?html,js,output
我很感激任何有助于缓解这个谜团的帮助
答案 0 :(得分:0)
我不确定我是否理解你的问题。但如果您想同时启动两个元素的css转换,请参阅此fiddle
基本上你不应该放两个setTimeout函数。两个CSS转换都应该在单个setTimeout函数中完成,如下所示
setTimeout(function () {
$(".b").css("max-height", "500px");
$(".c").css("max-height", "500px");
}, 1000);
更新了答案
<强> HTML 强>
<div class="a">
<div class="b">
<div class="box"></div>
</div>
<div class="c">
<div class="box"></div>
</div>
</div>
<强> CSS 强>
.a {
height:500px;
width:500px;
background:blue;
}
.b .box {
background: red;
height: 200px;
width: 200px;
margin: 15px;
transition: height 2s ease;
}
.c .box{
background: red;
height: 10px;
width: 200px;
margin: 15px;
transition: height 2s ease;
}
<强> JS 强>
setTimeout(function () {
$(".b .box").css("height", "10");
$(".c .box").css("height", "200px");
}, 1000);
setTimeout(function () {
$(".b .box").css("height", "200");
$(".c .box").css("height", "10px");
}, 4000);
答案 1 :(得分:0)
嗨,你看起来像这样.. ?? 据我所知,我认为这将是你想要的
setTimeout(function () {
$(".b").css("max-height", "500px");
$(".c").css("max-height", "500px");
}, 500);
setTimeout(function () {
$(".b").css("max-height", "0");
}, 2000);
.box { background: red; height: 200px; width: 200px; margin: 15px; }
.a { height: 500px; width: 500px; background: blue; }
.b, .c { max-height: 0; overflow: hidden; transition: max-height 1s; transition-delay: 0; }
<div class="a">
<div class="b">
<div class="box"></div>
</div>
<div class="c">
<div class="box"></div>
</div>
</div>
以下是此代码的工作演示
<强> DEMO 强>