Выпадающее меню JQuery с использованием слайд-шоу и слайдинга при наведении

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

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

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

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

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

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

Ответ 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(), чтобы сохранить тайм-аут для каждого элемента, поэтому каждое меню обрабатывается независимо, если у вас много элементов меню, это должно дать хороший эффект.

Ответ 2

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

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