jQuery macht was es will?

[robert]

hi folks,
hab hier ein kleines problem. bin grad dran ein menü mit
jquery umzusetzen, aber jquery macht hinundwieder was es
will.

sprich beim rollover zuckt das ding und beim pageload führt
er manchmal nicht alle funktionen aus, manchmal aber schon.

wenn man mal hierrauf geht: Avianto - Unternehmensberatung
und mal das menü testet bisschen rumklickt usw, merkt man, wie
z.b. der text vom active button manchmal nicht weiß wird, wie beim
rollover das rechteck zuckt usw. ich weiß leider einfach nicht, woran es
liegt.

hier mal der code, vll. fällt jemandem was auf:

<script type="text/javascript">
			var fadeSpeed = 80;
			$(document).ready(function() {
							$("#btBackdrop").hide();
							$(".menuItem a").each(function() {
								var hreflink = $(this).attr("href");
								if (hreflink.toLowerCase()==location.pathname.substr(location.pathname.lastIndexOf("/")+1,location.pathname.length)) {
									$(this).addClass("active");
									var pos = $(this).parent().position();
									var width1 = $(this).parent().width();
									$("#backdropImg2").attr({
										width: (width1 + 10),
										height: 19
									});
									$("#btBackdrop2").css( { "width": width1+10 + "px" } );
									var width2 = $("#btBackdrop2").width();
									//alert(width2);
									$("#btBackdrop2").css( { "left": (pos.left+width1/2-width2/2) + "px", "top":(pos.top - 2) + "px" } );
									$(this).animate({
										color: "#FFFFFF",
									}, fadeSpeed);
								}
							});
							if (location.pathname.substr(location.pathname.lastIndexOf("/")+1,location.pathname.length) == "") {
								$("#1 a").addClass("active");
								var pos = $("#1 a").parent().position();
								var width1 = $("#1 a").parent().width();
								$("#backdropImg2").attr({
									width: (width1 + 10),
									height: 19
								});
								$("#btBackdrop2").css( { "width": width1+10 + "px" } );
								var width2 = $("#btBackdrop2").width();
								//alert(width2);
								$("#btBackdrop2").css( { "left": (pos.left+width1/2-width2/2) + "px", "top":(pos.top - 2) + "px" } );
								$("#1 a").animate({
									color: "#FFFFFF",
								}, fadeSpeed);
							}
			
			
							
							$(".menuItem a").hover(
								
									function(){
										if($(this).hasClass("active") == false) {
										  var pos = $(this).parent().position();
										  var width1 = $(this).parent().width();
										  $("#backdropImg").attr({
										  	width: (width1 + 10),
										  	height: 19
										  });
										  $("#btBackdrop").css( { "width": width1+10 + "px" } );
										  var width2 = $("#btBackdrop").width();
										  //alert(width2);
										  $("#btBackdrop").css( { "left": (pos.left+width1/2-width2/2) + "px", "top":(pos.top - 2) + "px" } );
										  $("#btBackdrop").fadeIn(fadeSpeed);
										  $(this).animate({ 
										    color: "#FFFFFF",  	    
										  }, fadeSpeed );
									  };
									},
									function() {
										if($(this).hasClass("active") == false) {
												$("#btBackdrop").fadeOut(fadeSpeed);
												$(this).animate({ 
												 color: "#999999",  	    
												}, fadeSpeed );
										}
									});
								
								
							
						
							
						});
						
						
						
						
						
			function markActiveLink(button) {
			
			    //Look through all the links in the sidebar
			   
			
			   //Afterwards, look back through the links. If none of them were marked,
			   //mark your default one.
			 }
			
	</script>

danke und grüße

[Dharokan]

Hi,

habe gerade keine Zeit, mir Deinen Source genauer anzuschauen.
Aber meiner Erfahrung nach, hängen solche Effekte immer damit zusammen, daß ein animate(), fadeIn() o.ä. noch nicht abgearbeitet wurde, wenn schon ein neuer Event feuert.

Ein einfaches stop() wirkt da manchmal Wunder.

Vielleicht hilft Dir das ja schon weiter

Viele Grüße!

[CaselPasel]

Hey,
habe mir jetzt nicht dein Code genau angeschaut.
Aber halt das Menu! Wieso machst du es nicht mit CSS??
Es ist doch viel weniger Code und es funktioniert auch wenn JS mal deaktiv ist.
Und es funktioniert sofort und nicht erst wenn die Seite komplett geladen ist.

Mit freundlichen Grüßen

Cas

[robert]

Zitat von Dharokan

Hi,

habe gerade keine Zeit, mir Deinen Source genauer anzuschauen.
Aber meiner Erfahrung nach, hängen solche Effekte immer damit zusammen, daß ein animate(), fadeIn() o.ä. noch nicht abgearbeitet wurde, wenn schon ein neuer Event feuert.

Ein einfaches stop() wirkt da manchmal Wunder.

Vielleicht hilft Dir das ja schon weiter

Viele Grüße!

ja daran könnte es evtl. liegen.
aber wie erklärt sich dann beim ersten pageload die tatsache, dass
z.b. der text nicht ins weiß gefadet wird?

wie gesagt, ich werds testen


@CaselPasel: Das bring tmir leider nicht viel. Ich möchte smoothe übergänge
und keine harten. ist angenehmer fürs auge.


gruß

[CaselPasel]

Hey,
wenn dann probier mal mouseenter und mouseout, ich glaub jQuery hat die genau für so ein bubble porblem eingeführt. Und schau dir auch mal die queue funktion an.

Mit freundlichen Grüßen

Cas

[robert]

stop() ist das was geholfen hat, nen stop(true, true) kommt da ganz gut.
einzig und allein das problem dass beim laden der seite manchmal der
text nicht weiß wird hab ich nicht lösen können, bzw. habs jetzt
so gelöst, dass es halt eben kein animate ist, sondern einfach die
css eigenschaft gesetzt.


vielen dank


grüße

[Dharokan]

Gerne!
Auch wenn Du das alles schön fluffig haben willst, kannste ja das Aussehen von Vornherein schonmal im CSS festlegen. Freut mich aber, daß stop() geholfen hat.

Ciao,