css - jQuery 动画无意中还原

Question

整个周末，我一直在处理一个包含导航栏和主栏的元素。导航栏有一个切换按钮。当按下切换按钮时，我想为列的收缩和扩展设置动画。为了做到这一点，我创建了一个可以找到的 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 的宽度从一种尺寸更改为另一种尺寸并使其保持原样？

谢谢

Answer 1

您可以使用 .animate() 稍微简化一下并检查 #navDiv 的宽度。

Working Example

var w = $('#navDiv').outerWidth();

function toggleNav() {
    if ($('#navDiv').width() > 56) {
        $('#navDiv').animate({
            width: 56
        }, 500);
    } else {
        $('#navDiv').animate({
            width: w
        }, 500);
    }
}

我不确定是否有任何真正的性能提升，或者这是否只是个人偏好，但我通常尽量避免使用内联 onclick。

所以上面的代码可以写成:

Working Example 2

<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);