我正在尝试使用一个隐藏的div,当我按下一个按钮使其可见时,我希望它“推开”另一个div的一部分,换句话说,包含div的大小保持不变。
现在,我可以正常工作了,但是隐藏的div下方的div忽隐忽现,或者上下跳动了一点。这可能是因为我的动画不是同时发生的。
下面是我的代码:
HTML:
<div id="wrapper">
<div id="button">CLICK</div>
<div id="content"></div>
<div id="hidden"></div>
<div id="bottom"></div>
</div>
CSS:
#wrapper {
border: 1px solid green;
width 300px;
}
#content {
border: 1px solid red;
height: 200px;
}
#hidden {
border: 1px solid blue;
height: 100px;
}
#bottom {
height: 20px;
border: 1px solid purple;
}
JAVASCRIPT
$("#button").click(function (e) {
var newHeight = $("#content").height();
var hiddenHeight = $("#hidden").outerHeight();
var visible = $("#hidden").is(":visible");
newHeight += (visible ? hiddenHeight : -hiddenHeight);
$("#hidden").slideToggle({
duration: 200,
queue: false
});
$("#content").animate({
height: newHeight
}, {
duration: 200,
queue: false
});
});
小提琴:
http://jsfiddle.net/2exxrs1n/
您是否知道如何解决此问题,或者对我的问题有替代解决方案?
最佳答案
我猜是因为jQuery动画没有完全同步。
也许尝试考虑CSS3过渡。
transition-duration: 0.5s;
我在这里用示例更新了your fiddle