Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.03.2011, 14:31
Новичок на форуме
Отправить личное сообщение для DemonWather Посмотреть профиль Найти все сообщения от DemonWather
 
Регистрация: 18.01.2011
Сообщений: 3

JQuery отложенная обработка событий hover
Доброго Вам времени суток!

Есть двухуровневое меню следующего вида:
<ul class="select"><li><a href="#">Раздел 1</a>
<div class="select_sub show">
    <ul class="sub">
        <li><a href="#">подраздел меню 1.1</a></li>
        <li><a href="#">подраздел меню 1.2</a></li>
        <li><a href="#">подраздел меню 1.3</a></li>
    </ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#">Раздел 2</a>
<div class="select_sub">
    <ul class="sub">
        <li><a href="#">подраздел меню 2.1</a></li>
        <li><a href="#">подраздел меню 2.2</a></li>
    </ul>
</div>
</li>
</ul>


Необходимо чтобы при прохождении по пунктам первого уровня курсором мыши (Раздел 1 -> Раздел 2, событий $(".select").hover()), соответствующее подменю прежде чем исчезнуть, задерживалось на экране на некоторое время (событие (".select_sub").hover()).
Вопрос чисто эргономики - подменю быстро исчезает, прежде чем нерадивый посетитель доведет до него мышкой, проходя по другим элементом первого уровня)

Полагаю, что необходимо увязать два события hover с помощью инструмента hoverIntent... но пока ничего толком не вышло, за неимением опыта:
Мой, нерабочий вариант:

Вот мой вариант:
$(".select").hoverIntent({
        sensitivity: 7,
        interval: 100,
        over: nothing,
        timeout: 0,
        out: outsub
     });
      function outsub(){
               // добавить задержку перед исчезновением подменю
              $(".select_sub").find("sub").delay(500).hide();
      }
      function nothing() {}

Предложите хотя бы алгоритм (структуру jQuery обработчиков) - реализовать попробую сам. Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 08.03.2011, 22:49
Новичок на форуме
Отправить личное сообщение для DemonWather Посмотреть профиль Найти все сообщения от DemonWather
 
Регистрация: 18.01.2011
Сообщений: 3

Не могу понять, простая вроде конструкция:
$('.select, .current').hover(function(){
    $(".select_sub").find(".sub").stop(true, true).fadeTo('fast', 1).show();
}, function(){
    $(".select_sub").find(".sub").stop(true, true).delay(1000).fadeTo('fast', 0).hide();
});


Но вторая часть обработчика (плавное исчезновение) принципиально не работает! Подменю все равно исчезает мгновенно...

Подскажите кто знает порядок событий в таком css меню. Что вызывает (или кто вызывает) hover для подменю, если на него курсор вообще не заходит... но css корректно его показывает и прячет.
Ответить с цитированием
  #3 (permalink)  
Старый 09.03.2011, 09:01
Профессор
Отправить личное сообщение для Matre Посмотреть профиль Найти все сообщения от Matre
 
Регистрация: 07.01.2011
Сообщений: 582

Уберите вызов .hide()
Анимация на самом деле срабатывает, просто hide скрывает элемент без задержек, несмотря на то, что в очереди ещё есть анимация.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработка событий на динамически созданных объектах Alexey_R jQuery 28 15.02.2017 15:28
jQuery UI Autocomplete + Обработка ошибок Вертекс jQuery 0 23.02.2011 02:13
Цепная обработка события MouseDown с использованием jQuery gifer Events/DOM/Window 0 18.02.2011 16:55
svg. обработка событий amigo* Элементы интерфейса 0 23.06.2010 22:31
Обработка событий клавиатуры MaxPayne Events/DOM/Window 26 01.05.2009 10:37