Нестабильная jQuery Navigation

Question

Существует проблема с моей навигацией jQuery. У него нет обычной настройки навигации (ul> li> ul и т. Д.). У меня есть jsfiddle прямо здесь: http://jsfiddle.net/RMRGH/2/
Если его более удобно разместить код в этом разделе, а не jsfiddle, дайте мне знать, и я вставьте его сюда;).

CSS - это немного беспорядок, но выполняет задание =). Из-за подстилающей CMS (Joomla) я вынужден использовать эту настройку.

Навигация выглядит неустойчивым, и у меня нет достаточного знания jQuery, чтобы понять, почему.

При наведении курсора на предметы, довольно быстро от одного до другого. Меню становится невозможным, потому что оно сразу же переместилось. Справьтесь с ним, и вы увидите, о чем я говорю (Довольно трудно объяснить).

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

Заранее благодарен!

Answer 1

Я обновил свою скрипку: http://jsfiddle.net/RMRGH/6/

Кажется, проблема была в jQuery('#nav li').hover(function(){}..) недостающем clearTimeout(), что вызвало тайм-аут, чтобы продолжить, даже если вы снова нависли меню, таким образом, закрывая его.

вот код:

jQuery(document).ready(function(){ 

    var timer; 
    var hover; 

    jQuery('.moduletable-subNav > ul').hide(); 

    jQuery('#nav li').hover(
     function(){ 
      var id = jQuery(this).attr('data-number'); 
      jQuery('.moduletable-subNav > ul').slideUp(); 
      jQuery('#submenu-'+id).stop().slideDown(); 
      clearTimeout(timer); 
     }, 
     function(){ 
      var id = jQuery(this).attr('data-number'); 
      timer = setTimeout(function() { jQuery('#submenu-'+id).slideUp(); },1000); 
     } 
    ); 

    jQuery('.moduletable-subNav ul').hover(
     function(){ 
      clearTimeout(timer); 
     }, 
     function(){ 
      var id = jQuery(this).attr('id'); 
      timer = setTimeout(function() { jQuery('#'+id).slideUp(); },1000); 
     } 
    ); 
}); 
​ 

Answer 2

Ваши слайды вверх и вниз бегали асинхронно и путались. Следующие работы и довольно гладкие ... Не уверен, что это то, что вы хотели!

jQuery(document).ready(function(){ 
    jQuery('.moduletable-subNav > ul').hide(); 

    jQuery('#nav li').hover(
     function(){ 
      var id = jQuery(this).attr('data-number'); 
      jQuery('.moduletable-subNav > ul').hide(); 
      jQuery('#submenu-'+id).slideDown(); 
     }, 
     function(){ 
      var id = jQuery(this).attr('data-number'); 
      jQuery('#submenu-'+id).slideUp(); 
     } 
    ); 
});