jQuery 动画无意中还原

Question

周末，我一直在做一个有导航列和主列的项目。导航列有一个切换按钮。按下切换按钮时，我想对列的缩小和扩展进行动画处理。为了做到这一点，我创建了一个jsfiddle，可以在这里找到。我的相关 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 的宽度来简化这一点。

工作示例

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

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

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

工作示例 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);