jQuery .animate()在动画宽度时设置自己的初始值
jQuery .animate()在动画宽度时设置自己的初始值
提问于 2015-07-02 09:44:46
我正在为一个侧边栏做一个实现，该工具条从左边滑入，压缩主要内容div。
正如您可以从演示(http://jsfiddle.net/xy1x885n/)中看到的那样，滑出很好，但是当再次滑动时，侧边栏div被设置为100%的宽度，然后动画开始产生非常不稳定的效果。如果您检查侧栏元素并非常仔细地查看宽度css属性，这将更容易看到。
这已经在Chrome 43，IE 11 & FF开发者40上观察到了。
HTML：
<button type="button" onClick="toggleSidebar();">Toggle</button>
<div id="sidebar-container">
<div id="sidebar-side"> </div>
<div id="sidebar-main"> </div>
<div class="clear"></div>
</div>CSS：
html, body {
margin: 0;
padding: 0;
}
#sidebar-container {
display: -webkit-flex;
display: flex;
}
#sidebar-side {
float: left;
display: none;
background-color: #0bf;
opacity: 0;
width: 0;
overflow: hidden;
}
#sidebar-main {
float: right;
background-color: #fb0;
width: 100%;
height: 500px;
-webkit-flex: 1;
flex: 1;
}
.clear {
height: 0;
clear: both;
}Javascript：
function toggleSidebar() {
var sidebar = $("#sidebar-side");
var main = $("#sidebar-main");
if (sidebar.hasClass("active")) {
sidebar.stop().animate({
opacity: 0,
width: "0%"
}, function () {
sidebar.css('display', 'none');
});
main.stop().animate({
width: "100%"
});
} else {
sidebar.css('display', 'block');
main.stop().animate({
width: "60%"
});
sidebar.stop().animate({
opacity: 1,
width: "40%"
});
}
sidebar.toggleClass("active");
}我是在这里做错了什么/看到了一些事情，还是jQuery真的将宽度设置为100%，而不是仅仅从初始宽度开始？
提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-02 09:53:41
将侧边栏的宽度设置为0而不是"0%"
sidebar.stop().animate({
opacity: 0,
width: 0
}, function(){
sidebar.css('display', 'none');
});Updated fiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31181158
复制相关文章
相似问题
腾讯云开发者
