Question

我将此代码放在其他地方的代码段中，所以我可能不会这么做。我有多个看起来像这样的div：

<div class="services">
<p>...</p>
<ol class="serviceList" style="display: none;">
  <li>
    <p>service</p>
    <ul>
      <li>service description</li>
    </ul>
  </li>
...
</ol>
</div>

当服务<ol>悬停时，我希望slideDown发送到div。它需要延迟，以便在用户错误地输出鼠标时不会消失。但是如果他们将鼠标移到另一个服务div上，那么可见的服务需要立即消失以便为新的serviceList腾出空间这就是我现在所拥有的：

$('.services').each(function () {
            var time = 800;
            var hideDelay = 1000;

            var hideDelayTimer = null;

            var beingShown = false;
            var shown = false;
            var trigger = $(this);
            var info = $('.serviceList', this);

            $([trigger.get(0),info.get(0)]).mouseover(function () {


                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again

                    return;
                } else {



            info.addClass('active');

                    // reset position of info box
                    beingShown = true;

                    info.css('zindex','2')
                    .slideDown(time, function() {
                        beingShown = false;
                        shown = true;
                    });
                }

                return false;
            }).mouseout(function () {

                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;

                    info.css('zindex','0')
                    .fadeOut( hideDelay, function () {
                        shown = false;
                        info.removeClass('active');
                    });


                }, hideDelay);

                return false;
            });


        });

我对范围了解不多，所以我不知道get（0）的内容是什么。我一直试图在mouseover上发生一个事件，检查是否有任何其他“serviceList”是.active，然后隐藏它。这是有效的，除非你在“服务”之间切换太快。甚至接近这样做了吗？

由于

Answer 1

您应该尝试使用hoverIntent插件。这就是它的设计目标。

$('.services').hoverIntent(
     function() { // over
        $(this).find('.serviceList:first').slideDown();
     },
     function() { // out
        $(this).find('.serviceList:first').slideUp();
     }
);

请注意，这与hover()方法基本相同，但它包含您要查找的延迟。

jquery切换悬停延迟的悬停项目

1 个答案: