整个周末,我一直在处理一个包含导航栏和主栏的元素。导航栏有一个切换按钮。当按下切换按钮时,我想为列的收缩和扩展设置动画。为了做到这一点,我创建了一个可以找到的 jsfiddle here .我的相关 HTML 如下所示:
<div class="ui full-height grid">
<div class="full-height row">
<div id="navDiv" class="four wide full-height column" style="background-color:navy; <a href="#" onclick="toggleNav();" style="color:white;">toggle</a>
</div>
<div class="eight wide full-height column">
[Content Goes Here]
</div>
</div>
</div>
相关的 JavaScript 如下所示:
var isOpen = true;
function toggleNav() {
var options = {};
if (isOpen === true) {
options = { to: { width: 56 } };
} else {
options = { to: { width: 114 } };
}
$("#navDiv").effect("size", options, 500);
isOpen = !isOpen;
}
如示例所示,列执行收缩动画。但是,该列不会保持收缩状态。它会弹回到原来的大小。如何使动画将 navDiv
的宽度从一种尺寸更改为另一种尺寸并使其保持原样?
谢谢
最佳答案
您可以使用 .animate() 稍微简化一下并检查 #navDiv 的宽度。
var w = $('#navDiv').outerWidth();
function toggleNav() {
if ($('#navDiv').width() > 56) {
$('#navDiv').animate({
width: 56
}, 500);
} else {
$('#navDiv').animate({
width: w
}, 500);
}
}
我不确定是否有任何真正的性能提升,或者这是否只是个人偏好,但我通常尽量避免使用内联 onclick
。
所以上面的代码可以写成:
<a href="#" id="toggle" style="color:white;">toggle</a>
var w = $('#navDiv').outerWidth();
function toggleNav() {
if ($('#navDiv').width() > 56) {
$('#navDiv').animate({
width: 56
}, 500);
} else {
$('#navDiv').animate({
width: w
}, 500);
}
}
$('#toggle').click(toggleNav);
关于css - jQuery 动画无意中还原,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22127547/