Javascript без задержки в пунктах меню, но 5-секундная задержка при наведении на меню

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

Разметка:

<ul class="mainnav">
    <li><a href="#">item 1</a>
        <ul class="sub">
            <li><a href="#">item a</a></li>
            <li><a href="#">item b</a></li>
            <li><a href="#">item c</a></li>
        </ul>
    </li>
    <li><a href="#">item 2</a>
        <ul class="sub">
            <li><a href="#">item d</a></li>
            <li><a href="#">item e</a></li>
            <li><a href="#">item f</a></li>
        </ul>
    </li>
</ul>

Jquery:

function(){
    $('.mainnav > li').hover(
        function () {
             $(this).find('sub').fadeIn(300);
             },
        function () {
             $(this).find('sub').fadeOut(300);
        }
    );
    $('.mainnav').mouseout( function() {
        setTimeout(function() {
           $(this).find('sub').fadeOut(300);
        }, 2000);
    });
}

Итак, если я прокручиваю «элемент 1», он падает и показывает «элемент a», «элемент b», «элемент c». Если я переворачиваю «элемент 2», он падает и показывает «элемент d», «элемент e», элемент f».

Теперь, если я выхожу из «.mainnav», я хочу, чтобы перевернутый выпадающий список задерживался перед исчезновением.

Но это не то, что он делает. Он просто затухает, как будто перелистывается другой пункт меню.

Заранее спасибо.


javascript menu jquery delay rollover
person marksy    schedule 30.04.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы неправильно используете селектор. $('sub') будет искать тег с именем sub, но вы хотите найти элемент с классом sub, вы должны использовать $('.sub'). Одно это не решит вашу проблему. Попробуйте следующий код

       $('.mainnav > li').hover(
           function () {
              $(this).find('.sub').fadeIn(300);
           },
           function () {
              var sub = $(this).find('.sub');
              setTimeout(function () {
                 sub.fadeOut(300);
              }, 2000)

           }
        );

И вам не нужен отдельный обработчик события mouseout для .mainnav. Второй аргумент jquery hover — это обработчик mouseout.

И ради описания моего ответа создается var sub = $(this).find('.sub');, чтобы сохранить ссылку на зависший .sub и передать ее функции, потому что this внутри анонимной функции будет ссылаться на объект window

Обновлять

Следующий код предназначен для предотвращения затухания + затухания, если пользователь уводит мышь от меню и снова наводит на нее курсор до того, как меню полностью исчезнет.

        $('.mainnav > li').hover(
           function () {

              //this clears the timeout that is going to cause a fadeout
              window.clearTimeout(window.menufade);

              $(this).find('.sub').fadeIn(300);
           },
           function () {
              var sub = $(this).find('.sub');

              //this clears the timeout that is going to cause a fadeout, not necessary here I think, but i'll let it be :)
              window.clearTimeout(window.menufade);

              window.menufade = setTimeout(function () {
                 sub.fadeOut(300);
              }, 2000)

           }
        );
person Ejaz    schedule 30.04.2013
comment
Я подумал, что у меня должно быть второе событие, потому что, если вы выведете мышь из mainnav, то оно просто отреагирует так же, как перекатывание по другому '.mainnav › li'? - person marksy; 30.04.2013
comment
Вы можете попробовать без второго обработчика evnet и добавить его обратно, если он не работает так, как вы ожидаете :) Но я думаю, вам не придется этого делать, затухание задерживается, даже если вы наводите только элемент1/элемент2 - person Ejaz; 30.04.2013