javascript - 停止jquery效果？？或者停止 JavaScript

Question

我有一个很大的 ul 列表。像这样:

<ul class="eerstelaag">
    <li class=""><a title="?" href="/">? (14)</a>
        <ul class="tweedelaag" style="display: none;">
            <li><a href="/">Roerstaafjes</a></li>
            <li><a href="/">Thee favorieten</a></li>
            <li><a href="/">Siropen</a></li>
        </ul>
    </li>
    <li class=""><a title="?" href="/">? (14)</a>
        <ul class="tweedelaag" style="display: none;">
            <li><a href="/">Roerstaafjes</a></li>
            <li><a href="/">Thee favorieten</a></li>
            <li><a href="/">Siropen</a></li>
        </ul>
    </li>
    <li class=""><a title="?" href="/">? (14)</a>
        <ul class="tweedelaag" style="display: none;">
            <li><a href="/">Roerstaafjes</a></li>
            <li><a href="/">Thee favorieten</a></li>
            <li><a href="/">Siropen</a></li>
        </ul>
    </li>
</ul>

我有这个 JavaScript:

$(function()
        {
            var button = $("#assortiment ul.eerstelaag > li");

            button.hover(function()
            {

                if( button.hasClass("open"))
                {
                    var menuitem = $(this).find("ul"); 
                    menuitem.slideUp(600);

                    button.removeClass("open");     
                }
                else
                {
                    var menuitem = $(this).find("ul"); 
                    menuitem.slideDown(600);

                    button.addClass("open");

                }
            });
        });

当我将鼠标悬停在第一个 li 项目上时。然后那个li中的ul就来了并且显示。但现在问题来了。当我快速移动时，将鼠标悬停在 li 项目上。效果我快要疯了。当我悬停得越来越快时。这是一种疯狂的效果。

如何解决这个问题？

Answer 1

您可能正在寻找 stop函数，这将取消元素上当前正在运行的任何动画。您可以在 siblings 上使用它您要设置动画的元素的名称。

<小时/>

更新:根据我下面的评论，看起来避免困惑行为比简单地停止动画要棘手得多。这是一个粗略的看法:

jQuery(function($) {

  var button = $("#assortiment ul.eerstelaag > li"),
      opening = null,
      closing = null;

  button.mouseover(function() {
    var $this = $(this),
        open;

    if (!$this.hasClass('open')) {
      // If there's an active close operation, cut it short
      if (closing) {
        closing.stop().css("height", "").hide();
        closing = null;
      }

      // If there's an active opening operation, turn it into
      // a closing operation
      if (opening) {
        closing = opening;
        opening = null;
        closing.stop().css("height", "").slideUp(600, clearClosing);
      }

      // Is any sibling open? If so, unmark it it...
      open = $this.siblings('li.open');
      open.removeClass('open');
      if (!closing) {
        // ...and since the sibling wasn't still actively
        // opening (that's handled above), close it
        closing = open.find('ul:first');
        closing.stop().css("height", "").slideUp(600, clearClosing);
      }

      // Open
      $this.addClass('open');
      opening = $this.find('ul:first');
      opening.slideDown(600, clearOpening);
    }
  });

  // Callback used when we're done closing, to clear
  // our tracker
  function clearClosing() {
    if (closing && closing[0] === this) {
      closing = null;
    }
  }

  // Callback used when we're done opening, to clear
  // our tracker
  function clearOpening() {
    if (opening && opening[0] === this) {
      opening = null;
    }
  }
});

Live example

请注意，停止动画时，我必须显式清除 height，因为 slideUp/slideDown 可能会使其处于中间状态>。您可能可以使用类来跟踪主动打开/关闭项目，而不是我使用的变量。

我应该提到，在上面我将“open”类放在包含 ul 的 li 上，而在您原来的“open”类中位于 ul 本身上。如果它纯粹是一个标记(您没有在样式表中使用它)，那就太好了；如果没有，我希望您可以修改上面的内容以返回使用 ul 上的“open”类，或者更新样式表以使用 li.open > ul 选择器而不是 ul.open 选择器来设置它们的样式。