jquery hide Problem

[dodlhuat]

Hallo,
ich hab folgendes Problem mit einem jquery Script von mir. Und zwar wollte ich folgendes machen, nämlich 3 Buttons, die beim drüberhovern etwas einblenden und beim weggehen das wieder ausblenden.
Das ganze funktioniert aber nur wenn man's ganz langsam bedient, beim schnelleren drüber fahren werden dann manche Inhalte nicht mehr ausgeblendet, was dann etwas unschön wird. Hier mal der Code für einen Button:

$("#btn_pfirsich_rot_rollover").hover(function() {
		$("#popup_div_placeholder_rollover_spritzer").hide();
		$("#popup_div_placeholder_rolledout_spritzer").show();
		
		$("#popup_div_spritzer").css('left', '225px');
		$("#rollover_arrow_spritzer").css('margin-left', '20px');
		$("#popup_div_spritzer").fadeIn();
		$("#rollover_arrow_spritzer").fadeIn();

		$("#popup_inhalt_pfirsisch_rot").fadeIn(500);
	});
	
	$("#btn_pfirsich_rot_rollover").mouseleave(function() {
		$("#popup_div_placeholder_rollover_spritzer").show();
		$("#popup_div_placeholder_rolledout_spritzer").hide();
		$("#popup_inhalt_pfirsisch_rot").hide();
		$("#popup_div_spritzer").hide();
		$("#rollover_arrow_spritzer").hide();
	});

Da ich leider noch ziemlich am Anfang mit jquery stehe, habe ich leider überhaupt keine Ahnung woran das liegen könnte. Ich wollte eine Schleifen schreiben die immer nur eine Animation zugleich zulässt, aber das habe ich nicht geschafft, bzw hats nicht funktioniert. Wäre also für jede Hilfe dankbar, oder Hinweise die mich zur Lösung bringen.
Danke schonmal...

 

[Noeden]

Versuch es mal mit .mouseenter anstatt von hover. Dann feuert er das Event nur einmal anstatt von jeder Mausbewegung über dem Element. Ob das was an deinem Problem ändert, weiß ich nicht. Vllt kommt er ein wenig ins stottern bei hover oder führt das nur solange aus, wie die maus drüber ist?

GL

 

[dodlhuat]

Es geht jetzt schon deutlich besser, aber zu schnell darf man trotzdem nicht drüber fahren. Werde mich aber noch bissl damit spielen, vielleicht bekomm ichs dann noch hin. Danke erstmal!

 

[Paul_]

Feuert denn das mouseleave event?

 

[CPoly]

Ich tippe mal http://api.jquery.com/stop/ hilft dir weiter.

Da du noch am Anfang von jQuery stehst, hier direkt mal ein paar grundlegende Sachen die ich an deinem Skript auszusetzen habe.

1. Benutze chaining
Viele jQuery Methoden liefern das Objekt selbst als Rückgabewert. Deshalb kann man viele Sachen viel schöner und kürzer schreiben.

Vorher

$("#popup_div_spritzer").css('left', '225px');
$("#rollover_arrow_spritzer").css('margin-left', '20px');
$("#popup_div_spritzer").fadeIn();
$("#rollover_arrow_spritzer").fadeIn();

Nachher

$("#popup_div_spritzer").css('left', '225px').fadeIn();
$("#rollover_arrow_spritzer").css('margin-left', '20px').fadeIn();

2. RTFM
Ist nicht böse gemeint, aber in der Dokumentation steht, dass es zwei "hover" gibt. Anstatt also extra nochmal "mouseleave" zu benutzen, kannst du einfach "hover" eine zweite Funktion übergeben. Übrigens hätte man hier auch chaining benutzen können, um direkt nach dem hover das mouseleave zu binden. Aber man sollte hier natürlich einfach hover benutzen.

Vorher

$("#btn_pfirsich_rot_rollover").hover(function() {
    //...
});

$("#btn_pfirsich_rot_rollover").mouseleave(function() {
    //...
});

Nachher

$("#btn_pfirsich_rot_rollover").hover(function() {
    //...
}, function() {
	//...
});

Auch möglich, aber hier Blödsinn

$("#btn_pfirsich_rot_rollover")
	.hover(function() {
		//...
	})
	.mouseleave(function() {
		//...
	});

3. (Der wichtigste Punkt!)
Merke dir Objekt-Referenzen!
Die Gefahr bei jQuery ist es, jedes mal die jQuery Funktion aufzurufen, um seine Elemente auszuwählen (Ist ja auch sehr komfortabel). Aber man vergisst dabei, dass das unter Umständen lange dauern kann. In deinem Fall sind es nur id-Selektoren, also der schnellsten den es gibt, dennoch solltest du dir die Ergebnisse in Variablen merken.

Vorher

$("#btn_pfirsich_rot_rollover").hover(function() {
	$("#popup_div_placeholder_rollover_spritzer").hide();
	$("#popup_div_placeholder_rolledout_spritzer").show();

	$("#popup_div_spritzer").css('left', '225px');
	$("#rollover_arrow_spritzer").css('margin-left', '20px');
	$("#popup_div_spritzer").fadeIn();
	$("#rollover_arrow_spritzer").fadeIn();

	$("#popup_inhalt_pfirsisch_rot").fadeIn(500);
}, function() {
	$("#popup_div_placeholder_rollover_spritzer").show();
	$("#popup_div_placeholder_rolledout_spritzer").hide();
	$("#popup_inhalt_pfirsisch_rot").hide();
	$("#popup_div_spritzer").hide();
	$("#rollover_arrow_spritzer").hide();
});

Nachher

var
	popup_div_placeholder_rollover_spritzer = $("#popup_div_placeholder_rollover_spritzer"),
	popup_div_placeholder_rolledout_spritzer = $("#popup_div_placeholder_rolledout_spritzer"),
	popup_div_spritzer = $("#popup_div_spritzer"),
	rollover_arrow_spritzer = $("#rollover_arrow_spritzer"),
	popup_inhalt_pfirsisch_rot = $("#popup_inhalt_pfirsisch_rot"),

$("#btn_pfirsich_rot_rollover").hover(function() {

	popup_div_placeholder_rollover_spritzer.hide();
	popup_div_placeholder_rolledout_spritzer.show();

	popup_div_spritzer.css('left', '225px').stop(true, true).fadeIn();
	rollover_arrow_spritzer.css('margin-left', '20px').stop(true, true).fadeIn();

	popup_inhalt_pfirsisch_rot.stop(true, true).fadeIn(500);

}, function() {

	popup_div_placeholder_rollover_spritzer.show();
	popup_div_placeholder_rolledout_spritzer.hide();
	popup_inhalt_pfirsisch_rot.hide();
	popup_div_spritzer.hide();
	rollover_arrow_spritzer.hide();

});

 

[dodlhuat]

Super, danke schonmal für die ganzen Grundlagen-Tipps.

Ich habe das jetzt auch mal so umgesetzt. Nur habe ich statt hover ein mouseenter und ein mouseleave, was aber denke ich auch funktionieren sollte.
Nur wills noch immer nicht so ganz rund laufen. Zu schnelle Mausbewegungen verkraftet das ganze noch immer nicht.

Da das ganze für drei Buttons läuft, kann man vielleicht alle laufenden Animationen abbrechen und zurücksetzen sobald eine neue gefeuert wird? Möglicherweise, da die Animationen ja in eine Queue eingereiht und abgearbeitet werden, kann man vielleicht die "Main-Queue" immer vor einer Animation löschen? Oder gibts sowas nicht...

Und ein zweites Problem ist mir leider jetzt auch aufgefallen. Kann man in jquery irgendwie Browserabhängig Code ausführen, weil die Positionierung im IE leider anders aussieht als im Firefox. Drum müsst ich für den IE andere css Änderungen machen.

 

[CPoly]

Ließ meinen Beitrag nochmal
Besonders die erste Zeile. Und in dem Code Block ganz am Ende hab ich es sogar schon eingebaut.

Edit: Im IE habe ich es nicht getestet, normalerweise sollte jQuery ab IE6 funktionieren. Ich gucke mal wie es bei mir ist. Bist du sicher, dass das an jQuery liegt oder hast du eventuell generell schon CSS Probleme mit dem IE?

 

[dodlhuat]

Oh, super!
Das mit dem stop funktioniert gut. Jetzt passts. Und ich werd mein CSS nochmal durchsehen. Danke nochmal!