JQuery переключение парящих элементов с задержкой скрытия

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). Я пытался создать событие при наведении курсора, которое проверяет, является ли какой-либо другой «serviceList» .active, а затем скрывает его. Это работает, если вы не переключаетесь между «услугами» слишком быстро. Я даже близок к тому, чтобы сделать это правильно?

Спасибо

Answer 1

Вы должны попробовать использовать плагин hoverIntent . Вот для чего он предназначен.

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

Обратите внимание, что это в основном то же самое, что и метод hover () , но включает задержку, которую вы ищете.