[JQUERY] .animate / click function

[LikeStar]

Hallo Community,

bitte um Unterstützung. Folgenden Code habe ich geschrieben:

 $(document).ready(function(){

	 $('#button').click(function(){

		if($("#navigation").css('left') != "-200")
		{
			$("#navigation").animate({left:"0"});
		}
		else
		{
			$("#navigation").animate({left:"-200"});
		}
   });

});

Klicke ich auf #button erscheint die Navigation. Beim 2. Klick möchte meine
Navigation nicht mit machen? Die Navigation soll wieder zurück wandern. Geht jedoch nicht =/

Irgend eine Idee?

Beste Grüße

 

[terra75]

Mit der JQuery Funktion .toggle() sollte es einfacher gehen.
.toggle() | jQuery API Documentation

Gruß,
Terra

 

[LikeStar]

Mit der JQuery Funktion .toggle() sollte es einfacher gehen.
.toggle() | jQuery API Documentation

Gruß,
Terra

Erm? Dein ernst? Hast du dir mein Code überhaupt angeschaut?

 

[mikdoe]

Was bekommst du denn nach dem ersten Klick aus $("#navigation").css('left') heraus? Mach doch mal eine Debug Zeile for das if.

 

[TecEye]

css('left') liefert einen wert in px also muss dein abgleich if($("#navigation").css('left') != "-200px") lauten

Zusatz: Ich würde solche Abfragen aber immer mit 0px machen also andersrum if($("#navigation").css('left') == "0px")
ist sicherer und macht die Wartung einfacher falls du mal den Wert verändern willst hast du nicht mehrere Stellen sondern nur sie eine animation wo du es ändern musst

 

[terra75]

Erm? Dein ernst? Hast du dir mein Code überhaupt angeschaut?

Na sicher, sonst hätte ich ja nicht geantwortet. Könnte aus der Haut fahren.
Du hast dir aber anscheinend nicht genau die Funktion .toggle() angeschaut.

Du willst ein DIV mit der ID #navigation mit einem klick auf irgendein Button von links nach rechts ins Bild einfahren und beim erneuten klick wieder zurück fahren lassen.
Und da du mit JQuery arbeitest bietet sich da die .toggle() Funktion an.

z.B. so:

$( "#button" ).click(function() {
    $( "#navigation" ).toggle("slow");
});

Und mit JqueryUI könntest du sogar mehr Kontrolle in .toggle() bringen:

$( "#button" ).click(function() {
    $( "#navigation" ).toggle('slide', { direction: 'left' }, 'slow');
});

Natürlich würde aber auch folgendes ohne Jquery UI gehen:

$( "#button" ).click(function() {
    $( "#navigation" ).animate({width: 'toggle'});
});

Ach ja:

#navigation {
    display: none;
}

... wenn dein Menü nicht gleich zu sehen sein soll.

Da du ja aber auch mit keinem Wort erwähnt hast, wo sich dein Button befindet (irgendwo auf der Seite oder auf dem Menü selbst) habe ich das jetzt nicht mit berücksichtigt.

Pixelwerte für Positionsabfragen festzulegen ist einfach nicht sicher genug. Was ist, wenn durch ein Rundungsfehler des Browsers nicht 0px bei der Animation erreicht wurde, sondern -1px .. oder 1px.
Da kannste dann lange nachfragen ob das DIV genau auf 0px liegt. Es wird immer false sein.

Gruß,
Terra

 

[mikdoe]

Terra, lass dich nicht provozieren. Freundlichkeit wird einem leider nicht in die Wiege gelegt.