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

Question

我正在做一个小slideUp/slideDown动画（here）。 就像mouseenter --> slideUP＆amp; mouseleave --> slideDown。 它按预期工作。 但问题是，如果用户持续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');
          });

    });