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

jQuery动画无意中还原

1 个答案: