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项目上时。那李的ul即将到来并展示。但现在来了问题。当我快速盘旋在李物品上时。我疯了的效果。当我越来越快地盘旋时。这是一种疯狂的效果。

我该如何解决这个问题？

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置于中间状态。您可以使用类来跟踪主动打开/关闭项目，而不是我使用的变量。

我应该提到的是，在上面的内容中，我将“开放”课程放在包含li的{{1}}上，而在原作中，“开放”课程在{{1本身。如果它纯粹是一个标记（你没有在你的样式表中使用它），那就太好了;如果没有，我希望您可以修改上述内容以返回使用ul上的“打开”类，或更新样式表以使用ul选择器而不是ul选择器他们的风格。

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

1 个答案: