Question

我有一个隐藏的固定菜单，当我点击＃menu-trigger时，它会从页面侧面拉出菜单。如果我点击＃menu-trigger或＃menu-overlay，我再次隐藏菜单。当我单击或双击＃menu-trigger时，它会隐藏菜单并运行一次动画，但是当我双击＃menu-overlay时，它会动画两次，将所有内容从页面上移开太多。

我尝试使用.one点击功能但是当我重新打开菜单时，我无法使用叠加功能将其关闭。

jQuery('#menu-trigger').click(function() {
    if ($(this).css('margin-right') == '250px') {
        $('#menu').animate({
            "margin-right": '-=250'
        });
        $('#menu-trigger').animate({
            'margin-right': '-=250'
        });
        $("#skinSelectorContainer").hide();
    } else {
        $('#menu').animate({
            'margin-right': '+=250'
        });
        $('#menu-trigger').animate({
            'margin-right': '+=250'
        });
    }
    $('#menu-overlay').fadeToggle();
});


jQuery('#menu-overlay').click(function() {
    $('#menu').animate({
        "margin-right": '-=250'
    });
    $('#menu-trigger').animate({
        'margin-right': '-=250'
    });
    $('#menu-overlay').fadeToggle();
});

Answer 1

您可以使用：

.stop()在开始新动画之前当前正在运行的动画

或者您可以使用

测试元素是否在动画的进度中

:animated selector

＆＃13;

jQuery('#menu-trigger').on('click', function(e) {
  //
  // if menu is animated do nothing and return
  //
  if ($('#menu').is(':animated')) {
      console.log('animation prevented');
      return;
  }
  if ($('#menu').offset().left != 0) {
      $('#menu').animate({
          "left": 0
      }, 'slow');
  } else {
      $('#menu').animate({
          "left": ($('body').width()-$('#menu').width())
      }, 'slow');
  }
});

＆＃13;

#menu {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button type="button" id="menu-trigger">menu trigger</button>
<div id="menu">

</div>

＆＃13;

防止双击动画，但再次允许

1 个答案: