Как установить задержку при наведении курсора для этого меню?

Question

У меня есть выпадающее меню, и я хочу добавить задержку при наведении мыши.Поэтому, когда вы наводите курсор мыши на меню, оно будет отображаться в раскрывающемся списке, но при перемещении мыши из меню я хочу, чтобы произошла некоторая задержка.

Я искал это весь день и ничего не нашел,ожидайте плагин hoverIntent, который я не знаю, чтобы использовать.

Вот мой код:

HTML:

<ul id='nav'>
  <li><a href='#'>Top level 1</a></li>
  <li><a href='#'>Top level 2</a>
    <ul>
      <li><a href='#'>Sub 2 - 1</a></li>
      <li>
        <a href='#'>Sub 2 - 2</a>
        <ul>
          <li>
            <a href='#'>Sub 2 - 2 - 1</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
            </ul>
          </li>
          <li><a href='#'>Sub 2 - 2 - 2</a></li>
          <li>
            <a href='#'>Sub 2 - 2 - 3</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>Sub 2 - 3</a></li>
    </ul>
  </li>
</ul>

Jquery:

$(document).ready(function(){                   
    $("#nav ul ").css({display: "none"}); 
    $("#nav li").hover(
        function()
            {
                $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();
            },
        function(){
          $(this).find('ul:first').css({visibility: "hidden"});
        }
);

ПожалуйстаПредположим, что я большой noob для JavaScript:)

Спасибо!

РЕДАКТИРОВАТЬ:

Я попробовал все решения, и ни один не работаложидать решения от Патриции.Теперь я получаю странное поведение, как вы можете видеть на http://pastehtml.com/view/aykmhy9ae.html

Answer 1

Это добавляет 5-секундную (5000 мс) задержку ...

$(this).find('ul:first').delay(5000).css({visibility: "hidden"});

---

РЕДАКТИРОВАТЬ:

Подробнее здесь.

Answer 2

 $(function () {
        var timer = null;
        $("li", "#nav").hover(
            function () {
                var element = $(this);
                timer = window.setTimeout(function () { element.find("ul:first").slideToggle(); }, 500);
            },
            function () { window.clearTimeout(timer); $(this).find('ul:first').slideToggle(); }
        );

            $("ul", "#nav").css("display", "none");
    });

Answer 3

Вам просто нужно использовать settimeout, чтобы задержать срабатывание функции, а также удостовериться, что в случае их зависания тайм-аут сброшен. Это сделает тайм-аут 1000 мс.

$(document).ready(function(){                   
    $("#nav ul ").css({display: "none"}); 
    var onHoverTimeoutFunction = null;
    $("#nav li").hover(
        function()
            {
                onHoverTimeoutFunction = setTimeout(function() {$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();},1000);
            },
        function(){
          clearTimeout(onHoverTimeoutFunction);
          $(this).find('ul:first').css({visibility: "hidden"});
        }
);

Answer 4

вы бы хотели что-то вроде этого:

        $("#nav li").hoverIntent({
            over: function(e){
               $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();

            },
            out:function(e){
                $(this).find('ul:first').css({visibility: "hidden"});

            },
            timeout: 1000
        });

где 1000 - это количество миллисекунд, в течение которых вы хотите задать задержку при наведении мыши

Answer 5

Могу ли я предположить, что постепенное затухание лучше, чем задержка.В этом случае попробуйте следующее вместо visibility: "hidden" кода

$(this).find('ul:first').fadeOut('slow');

Небольшой совет: когда вы отображаете / скрываете элементы с помощью jQuery, вам нужно только использовать следующее:

hide(), show(), toggle()
fadeIn(), fadeOut(), fadeToggle()
slideIn(), slideOut(), slideToggle()

Установка display и visibility CSS-свойств бесполезна.