Раскрывающееся меню JQuery, использующее слайд и слайд при наведении мыши

Question

Я сделал очень простое раскрывающееся меню, используя jQuery slideup и slidingown для функций - но оно становится очень нервным (я использую Firefox 3.6.8), если навести курсор мыши на него или если мышь проводится на одном из пунктов подменю.

Я сделал рабочий пример по следующей ссылке:

http://jsfiddle.net/jUraw/19/

Без функции .stop (true, true) это еще хуже. Я также попытался добавить hover-intent, но поскольку у меня есть слайд-шоу, запускаемое при наведении курсора в том же самом div, оно конфликтует с функциональностью слайд-шоу.

Есть что-то, что я пропускаю? Я слышал, что clearqueue может сработать, или, может быть, тайм-аут, но не могу понять, где их добавить.

Спасибо всем.

Answer 1

Вы можете построить с небольшой задержкой, скажем, 200 мс, чтобы анимация завершилась, чтобы она не была скачкообразной, но оставить .stop(), чтобы она все равно не нарастала, как это:

$(function () {    
  $('#nav li').hover(function () {
     clearTimeout($.data(this, 'timer'));
     $('ul', this).stop(true, true).slideDown(200);
  }, function () {
    $.data(this, 'timer', setTimeout($.proxy(function() {
      $('ul', this).stop(true, true).slideUp(200);
    }, this), 200));
  });
});

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

Answer 2

Это добавляет небольшую задержку при открытии - поэтому быстрый запуск по нему не выскочит в меню.

$(function () {    
  $('#nav li').hover(function () {
    $('ul', this).stop(true, true).delay(200).slideDown(200);
  }, function () {
    $('ul', this).stop(true, true).slideUp(200);
  });
});