Menu się zacina jQuery Opcje

[adamantd]

Witam mam mały problem z menu samo w sobie działa bez zarzutów po najechaniu wysuwa mi się rozwijana lista w dół w poszczególnych zakładkach ale kiedy chcę rozwinąć kolejne podmenu po raz któryś to nie chce się rozwinąć... jeżeli wszystko robię powoli to działa ale jeśli na którąś z głównych zakładek najadę myszką i zjadę kilka razy szybko i menu nie zdąży się rowinąć całe lub całe zwinąć to najbardziej zagnieżdżone sub-menu już nie chce się rozwijać.. nie wiem czy odpowiednio to wytłumaczyłem ;P wkleję html, css i jquery może któś będzie w stanie mi pomóc

[HTML] pobierz, plaintext 
<div id="menu">
                	<ul>
                    	<li><a href="#&">Home</a></li>
                        <li><a href="#&">Przyklad1</a></li>
                        <li class="sub-menu"><a href="#&">Przyklad2</a>
								<ul>
									<li><a href="#&">Przyklad3</a></li>
									<li><a href="#&">Przyklad4</a></li>
								</ul>
 
						</li>
                        <li class="sub-menu"><a href="#&">Przyklad5</a>
								<ul>
									<li><a href="#&">Przyklad6</a></li>
									<li><a href="#&">Przyklad7</a></li>
									<li><a href="#&">Przyklad8</a></li>
								</ul>
						</li>
                        <li class="sub-menu"><a href="#&">Przyklad9</a>
								<ul>
									<li><a href="#&">Przyklad10</a></li>
									<li><a href="#&">Przyklad11</a></li>
								</ul>
						</li>
						<li class="sub-menu"><a href="#&">Przyklad12</a>
								<ul>
									<li><a href="#&">Przyklad13</a></li>
									<li><a href="#&">Przyklad14</a></li>
								</ul>
 
						</li>
						<li class="sub-menu"><a href="#&">Przyklad15</a>
								<ul>
									<li><a href="#&">Przyklad16</a></li>
									<li><a href="#&">Przyklad17</a></li>
								</ul>
 
						</li>
                        <li class="sub-menu"><a href="#&">Przyklad18</a>
							<ul>
									<li><a href="index.php?action=przyklad">Przyklad19</a></li>
									<li><a href="index.php?action=przyklad">Przyklad20</a></li>
									<li><a href="index.php?action=przyklad">Przyklad21</a></li>
									<li><a href="index.php?action=przyklad">Przyklad22</a></li>
									<li><a href="index.php?action=przyklad">Przyklad23</a></li>
									<li class="sub-menu"><a href="#&">Przyklad24</a>
										<ul>
											<li><a href="index.php?action=przyklad">Przyklad25</a>
											<li><a href="index.php?action=przyklad">Przyklad26</a>
										</ul>
									</li>
								</ul>
						</li>
						<li><a href="#">Przyklad500</a></li>
                    </ul>
               	 </div>
 
[HTML] pobierz, plaintext 

pozmieniałem nazewnictwo na potrzebę tego tematu

[HTML] pobierz, plaintext 
/* MENU*/		 
#menu {border-bottom: 1px solid #F2EBD5; width: 1004px;  height: 28px; background: #b8b2e7 url(../images/tlo_menu.jpg); z-index:8999;}
#menu > ul li { display: block; height: 28px; float: left;  width: 90px; position: relative;}
#menu > ul li a { display: block; text-decoration: none; width: auto; padding: 8px 0; font: 12px Verdana, Geneva, sans-serif; text-align: center; color: #33323a; }
 
/* SUBMENU */
#menu ul li.sub-menu ul {  position: absolute;  top: 28px; display: none;  background-color: #705D4A; z-index: 9000; }
#menu ul li.sub-menu ul li { width: 90px; height: 28px;} 
#menu ul li.sub-menu ul li a {font-size: 9px; text-align: left; padding: 8px 7px; color: #fff;}
 
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
/*
MENU GŁÓWNE POZIOME GÓRA
*/
$('#menu ul > li').not('.sub-menu').hover(function(){
	$(this).css('background','url(images/tlo_menu_hover.jpg) repeat-x');
	}, function(){
		$(this).css('background','none');
		});
 
$('#menu ul li.sub-menu').each(function(){
 
	$(this).hover(function(){
 
		$(this).css('background','url(images/tlo_menu_hover.jpg) repeat-x');
		var szerUlWys = parseInt($(this).children('ul:first').css('width'));//szer ul wysuwanego pierwszego sub-menu
		$(this).children('ul').slideDown(200);//dla pierwszej listy sub-menu
		$(this).children('ul').children('li').each(function(){//dla każdego li w sub-menu
			$(this).hover(function(){
				$(this).css('background','url(images/tlo_submenu_hover.jpg) repeat-x').children('a').css('color','#333');//podłożenie tła dla submenu li
				$(this).each(function(){//sprawdzenie które z li mają klasę sub-menu
					if($(this).has('sub-menu')){
					$(this).nextAll('li.sub-menu').mouseover(function(){
					$(this).children('ul').css({
					'left':szerUlWys+'px',
					'top':0
					}).slideDown(200);
					});
					$(this).nextAll('li.sub-menu').mouseout(function(){
						if($(this).children('ul').is(':focus')){
						$(this).children('ul').stop().slideUp(200);
						}
						});
 
				}
					})
 
			}, function(){
				$(this).css('background','none').children('a').css('color','#fff');
				});
			});
		}, function(){
			var $thy = $(this);
			$(this).children('ul').stop().slideUp(200, function(){
				$thy.css('background','none');
				});
 
			});
	});
 
[PHP] pobierz, plaintext 

siedzę już nad tym kilka godzin a nie mam tyle czasu żeby siedzieć kolejne kilka nad jQuery (może to tylko jakiś błachy błąd)
z góry dzięki

problem konkretnie jest w "przykład 24" kiedy najadę kilka razy za szybko zabierając myszę z powrotem z zakładki np przykład "18" to cała reszta poniżej przykład18 jużnie chce się wysunąć...............

Ten post edytował adamantd 28.09.2012, 17:06:14

[viking]

Dzieje się tak ponieważ akcja cały czas jest wykonywana i po jej zakończeniu skrypt wykonuje nową dla danego zdarzenia. Musisz zadbać o to, żeby albo akcje kolejkować (odradzane) albo przerwać jej wykonywanie gdy ma miejsce nowe zdarzenie.

[adamantd]

Ok ale wrzuciłem stop() przed slideUp dla obu pod-menu co jeszcze mogę zrobić w tej kwestji? podaj mi jak możesz jakiś prosty przykład to powinienem załapać

[viking]

Wstaw jakąś flagę isAnimating = true i wykonuj tylko jeśli warunek sprawdzony. To w drugą stronę podejście czyli pozwolić dokończyć akcję. Swoją drogą pierwszy z brzegu przykład http://www.red-team-design.com/wp-content/...-menu-demo.html
Nie rozumiem czemu ludzie mając nowe przeglądarki, nowe technologie lubią tak bardzo zwalać wszystko na JS.

[adamantd]

[PHP] pobierz, plaintext 
$('#menu ul li.sub-menu').each(function(){
	var isAnim = false;////////////////////////////////////na początku false
	$(this).hover(function(){
 
		$(this).css('background','url(images/tlo_menu_hover.jpg) repeat-x');
		var szerUlWys = parseInt($(this).children('ul:first').css('width'));//szer ul wysuwanego pierwszego sub-menu
		if(!isAnim){//////////////////////////////////////////////////////sprawdzenie czy jest animowane czy nie
		$(this).children('ul').slideDown(200);//dla pierwszej listy sub-menu
 
		isAnim = true;//////////////////////////////przypisanie true na czas wykonywania akcji
 
		$(this).children('ul').children('li').each(function(){//dla każdego li w sub-menu
			$(this).hover(function(){
				$(this).css('background','url(images/tlo_submenu_hover.jpg) repeat-x').children('a').css('color','#333');//podłożenie tła dla submenu li
				$(this).each(function(){//sprawdzenie które z li mają klasę sub-menu
					if($(this).has('sub-menu')){
					$(this).nextAll('li.sub-menu').mouseover(function(){
					$(this).children('ul').css({
					'left':szerUlWys+'px',
					'top':0
					}).slideDown(200).mouseout(function(){
						if($(this).children('ul').is(':focus')){
						$(this).children('ul').slideUp(200);
						}
					});
						});
 
				}
					})
 
			}, function(){
				$(this).css('background','none').children('a').css('color','#fff');
				});
			});
		}
		}, function(){
			var $thy = $(this);
			$(this).children('ul').slideUp(200, function(){
				$thy.css('background','none');
				isAnim = false;//////////////////////////////////////////////////przypisane false po ukończeniu animacji ukrywającej
				});
 
			});
	});
 
 
 
[PHP] pobierz, plaintext 

dodałem w taki sposób -czy to miałeś na myśli? działa lepiej tylko chyba dlatego, że wywaliłem stop() który bardzo mi z jednej strony pomagał ale z drugiej strony powodował problemy