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

我有一个大名单。像这样：

<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>

当我将鼠标悬停在第一个项目上时。然后，保险商实验室表示，李将前来展示。但现在问题来了。当我快速移动时，将鼠标悬停在li项目上。结果我疯了。当我停得越来越快的时候。这是一种疯狂的效果

---

如何解决此问题？

您可能正在查找该函数，该函数将取消元素上当前正在运行的任何动画。您将在要设置动画的元素上使用此选项

---

更新：下面是我的评论，看起来避免混乱行为比简单地停止动画要困难得多。这里有一个粗略的估计：

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;
    }
  }
});

请注意，在停止动画时，我必须明确清除

高度

，因为它可以通过

slideUp

/

slideDown

保持中间状态。您可能会使用类来跟踪活动的开始/结束项，而不是我使用的变量

---

我应该提到的是，在上面我把“开放”类放在包含

ul

的

li

上，而在你的原稿中，“开放”类放在

ul

上。如果它纯粹是一个标记（您没有在样式表中使用它），那就太好了；如果没有，我希望您可以修改上述内容，返回到使用

ul

上的“open”类，或者更新样式表，使用

li.open>ul

选择器，而不是

ul.open

选择器来设置样式。

您可能正在寻找函数，该函数将取消元素上当前运行的任何动画。您将在要设置动画的元素上使用此选项

---

更新：下面是我的评论，看起来避免混乱行为比简单地停止动画要困难得多。这里有一个粗略的估计：

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;
    }
  }
});

请注意，在停止动画时，我必须明确清除

高度

，因为它可以通过

slideUp

/

slideDown

保持中间状态。您可能会使用类来跟踪活动的开始/结束项，而不是我使用的变量

---

我应该提到的是，在上面我把“开放”类放在包含

ul

的

li

上，而在你的原稿中，“开放”类放在

ul

上。如果它纯粹是一个标记（您没有在样式表中使用它），那就太好了；如果没有，我希望您可以修改上面的内容，返回到使用

ul

上的“open”类，或者更新样式表以使用

li.open>ul

选择器而不是

ul.open

选择器来设置样式。

@Mike:menuitem.stop（）.slideUp（600）；对于example@Mike，@Andy:很高兴这对你有用。在我的快速测试中，我仍然能够得到一些相当混乱的行为，但如果你没有，那就太棒了！我只是怀疑这里有一个重构我们可以做。。。我认为在使用

mouseenter

（通过悬停）进行此操作时，您可能会出现奇怪的行为，因为您正在移动元素，因此元素可能会在鼠标下移动（或从鼠标下移出）。谢谢您的回答。但是当我向函数中添加.stop时。然后是没有好高度的li项目。当鼠标悬停在li项目上时。li项目的高度每次都越来越小……@Mike，@Andy:FYI，混乱得到了控制。（这个问题让我感兴趣…@Mike:menuitem.stop（）.slideUp（600）；对于example@Mike，@Andy:很高兴这对你有用。在我的快速测试中，我仍然能够得到一些相当混乱的行为，但如果你没有，那就太棒了！我只是怀疑这里有一个重构我们可以做。。。我认为在使用

mouseenter

（通过悬停）进行此操作时，您可能会出现奇怪的行为，因为您正在移动元素，因此元素可能会在鼠标下移动（或从鼠标下移出）。谢谢您的回答。但是当我向函数中添加.stop时。然后是没有好高度的li项目。当鼠标悬停在li项目上时。li项目的高度每次都越来越小……@Mike，@Andy:FYI，混乱得到了控制。（这个问题使我感兴趣……）