javascript - 当 stop() 取消动画时，如何防止类保持事件状态？

Question

我对我得到的动画感到困惑，基本上我在导航按钮上设置了一个类，当菜单可见时，它将它从三个引脚变成一个x。

问题是，当您垃圾点击按钮时，尽管菜单不在屏幕上，但 x 类仍可能处于事件状态。这[很可能]是由 stop() 函数引起的，因为它取消了动画。

这是我迄今为止尝试过的:

在动画的回调函数中设置添加/删除类，这种方法可以工作，但看起来很难看，因为它只在动画之后设置“X”，并且也不适用于我需要的 stop()。

我最初有两个单独的指令，一个用于处理动画，另一个为导航元素设置一些不同的值等。然后我一个接一个地运行指令，但这给了我与当前混合解决方案相同的效果。

这是我当前的尝试:

nav.directive('navSettings', [function() {

  return {
    restrict: 'A',
    link: function($scope, element, attrs) {

      var windowHeight = $(window).height(),
          siteNav = $('#site-nav');

      siteNav.css('height', windowHeight + 'px');

      element.on('click', function() {

        var posLeft = siteNav.position().left,
            navWidth = siteNav.width();

        posLeft === -navWidth ? posLeft = 0 : posLeft = -navWidth;

        if (element.hasClass('x')) {

          element.removeClass('x');
          siteNav.stop().animate({
            left: posLeft
          });
        }
        else {

          element.addClass('x');

          siteNav.stop().animate({
            left: posLeft
          });
        }
      });
    }
  }
}]);

一些与之相关的 HTML:

<div>
  <div>
    <button id="nav-toggle" data-nav-settings>
      <hr ng-repeat="pin in [1, 2, 3]">
    </button>
  </div>
</div>
<aside id="site-nav">
  <nav class="padding narrow" ng-controller="NavCtrl"></nav>
</aside>

我不知道还能做什么来确保这种情况不会发生。

Answer 1

nav.directive('navSettings', [function() {
    return {
        restrict: 'A',
            link: function($scope, element, attrs) {
                var windowHeight = $(window).height(),
                siteNav = $('#site-nav');
                siteNav.css('height', windowHeight + 'px');
                element.on('click', function() {
                    var posLeft, navWidth = siteNav.width();
                    if (element.hasClass('x')) {
                        element.removeClass('x');
                        posLeft = -navWidth;
                    }else{
                        element.addClass('x');
                        posLeft = 0;
                    }
                    siteNav.stop().animate({
                        left: posLeft
                    });
                });
            }
        }
    }
]);

删除了对左侧位置的额外检查，并将动画移到if之外。现在检查垃圾邮件过滤器是否有效:)