用户交互完成后立即停止 jquery 动画

Question

我正在制作一个小型 slideUp/slideDown 动画（此处）。 就像，mouseenter -->向上滑动 & 鼠标离开 -->向下滑动。 它按预期工作。 但问题是，如果用户连续执行mouseenter/mouseleave，完成后，动画仍然会发生。

它看起来不酷。我尝试了 jquery、clearQueue() & stop() 函数。但没有用。

任何建议。

Answer 1

不确定这是否是您使用 .stop() 的方式，但这似乎对我有用：

$("div").bind("mouseenter", function() {
        $("a").stop(true,true);
        $("a").animate({
            opacity: 1,
            height: 'toggle'
          }, 'fast', function() {
              $(this).css('display', 'block');
          });

    });
    $("div").bind("mouseleave", function() {
        $("a").stop(true,true);
        $("a").animate({
            opacity: 0,
            height: 'toggle'
          }, 'fast', function() {
              $(this).css('display', 'none');
          });

    });