[FRAGE] jQuery - Click mit if und else?

[LikeStar]

Hallo Community,

... die Sache mit "if und else" ...
verstehe ich nur halbwegs

Bitte um kurze Aufklärung. Ich hab's jetzt ganz simple
geschrieben.

jQuery(document).ready(function() {

 $(".button1").click(function(){
    $("#div1").animate({height:"500px"});
    });
    
  $(".button1").click(function(){
   $("#div1").animate({height:"165px"});
 
   });
 });

Im Anhang befinden sich 2 Bilder - Dient zur Veranschaulichung.
- Wenn ich auf ein Button clicke, soll sich die Div Ebene mit .animate vergrößern.
- Clicke ich ein 2. Mal soll, sich die div ebene wieder mit .animate verkleinern.

Allerdings geschieht mit meinem Code Folgendes:
Ich klicke drauf und die Div ebene vergrößert sich und unmittelbar danach schließt sich
die Ebene sofort?

Habt ihr da ein paar Tipps auf Lager?
Danke

 

[Sempervivum]

Du musst den Zustand des div speichern, entweder in einer Variablen, oder, etwas eleganter, indem Du ihm eine Klasse hinzufügst und löschst. So müsste es gehen:

jQuery(document).ready(function() {
    $(".button1").click(function(){
        $el = $("#div1");
        if ($el.hasClass("islarge") {
            $el.removeClass("islarge");
            $el.animate({height:"165px"});
        } else {
            $el.addClass("islarge");
            $el.animate({height:"500px"});
        }
     });
 });

 

[LikeStar]

Du musst den Zustand des div speichern, entweder in einer Variablen, oder, etwas eleganter, indem Du ihm eine Klasse hinzufügst und löschst. So müsste es gehen:

Okay, damit ich das Ganze nachvollziehen kann:

$el = $("#div1");

$el ist demnach die "Variable" für die Div1 Ebene. Richtig?

Ich muss nur überlegen, was das Ganze mit if und else zu tun hat. Ich probiere es mal aus.
Ich will es auch verstehen. Aber das mit dem addClass ist verständlich.

Edit: Okay, wow. Ich hab's verstanden

 

[Sempervivum]

Schön! Die Variable $el habe ich nur eingeführt, weil dieses Element einige Male gebraucht wird, um zu vermeiden, dass der Ausdruck $("#div1") mehrmals berechnet wird. Man weiß es nicht genau, möglicherweise ist auch der Javascript-Interpreter so intelligent, dass er das erkennt und diesen Ausdruck cached.

 

[LikeStar]

Schön! Die Variable $el habe ich nur eingeführt, weil dieses Element einige Male gebraucht wird, um zu vermeiden, dass der Ausdruck $("#div1") mehrmals berechnet wird. Man weiß es nicht genau, möglicherweise ist auch der Javascript-Interpreter so intelligent, dass er das erkennt und diesen Ausdruck cached.

Du hast nicht zufällig, einen Fehler bewusst eingebaut, damit ich daraus lerne?

Möglicherweise eine Klammer zu wenig, oder zu viel?

});

Ich frage nur.... ganz höflich, also soll keine Unterstellung sein.

Beim Aufrufen der Seite, lädt der Preloader vor sich hin ...

Edit:

So schaut, mein Preloader aus.

jQuery(document).ready(function($) {  

$(window).load(function(){
	$('#preloader').delay(2000).fadeOut('slow',function(){$(this).remove();
	});
  });
});

 

[Sempervivum]

*smile* das liegt mir fern, dich testen zu wollen, indem ich absichtlich Fehler einbaue. Ich habe den Code jedoch nicht getestet und kann daher nicht dafür garantieren, dass er fehlerfrei ist. Habe ihn aber jetzt mal in meinen Webeditor eingefügt und dieser zeigt keinen Syntaxfehler an.
Der Preloader ist aber jetzt ganz etwas anderes, nicht wahr? Wenn ich das richtig überblicke, ist das document-ready überflüssig, weil Du ja window-load verwendest:

$(window).load(function(){
	$('#preloader').delay(2000).fadeOut('slow',function(){$(this).remove();
	});
});

Edit: So habe ich es eben mal getestet und es funktioniert.

 

[LikeStar]

Wenn ich das richtig überblicke, ist das document-ready überflüssig, weil Du ja window-load verwendest:

Recht hast du!

jQuery(document).ready(function($) {

War überflüssig...
Funktioniert auch ohne document.ready.

Sobald ich deinen Code mit in die .js Datei einbaue, lädt mein Prelaoder und hört nicht auf.
Irgend eine Idee?

Meine .js Datei für die Webseite schaut so aus:

$(window).load(function(){
	$('#preloader').delay(2000).fadeOut('slow',function(){$(this).remove();
	});
});

jQuery(document).ready(function(){
    iImg = 1;
    maxImg = 4;
    $(".rechts").click(function() {
        if (iImg == maxImg) iImg = 1; else iImg++;
        $("#image1").css("background-image", "url('images/hotel" + iImg + ".jpg')");
    });
    $(".links").click(function() {
        if (iImg == 1) iImg = maxImg; else iImg--;
        $("#image1").css("background-image", "url('images/hotel" + iImg + ".jpg')");
    });
});

jQuery(document).ready(function(){
	 jQuery("#z").click(function(){
		jQuery('#navi').fadeToggle( "slow", "linear");
   });
});

jQuery(document).ready(function() {
    $(".apfel").click(function(){
        $el = $("#1");
        if ($el.hasClass("islarge") {
            $el.removeClass("islarge");
            $el.animate({height:"165px"});
        } else {
            $el.addClass("islarge");
            $el.animate({height:"500px"});
        }
     });
 });

Edit:
Kleiner Nachtrag:
Die Anker Navigation mit der Scroll funktion, wurde in die HTML Seite eingebaut:

<script type="text/javascript">
	
	$(document).ready(function() {
		
		$('a[href*=#]').bind("click", function(event) {
			
			event.preventDefault();
			
			var ziel = $(this).attr("href");
			
			$('html,body').animate({
				
				scrollTop: $(ziel).offset().top
			
			}, 800 , function (){location.hash = ziel;});
	   });
	return false;
	});
</script>

 

[Sempervivum]

Ohoh, da habe ich doch einen Fehler übersehen: Da fehlt eine schließende Klammer: if ($el.hasClass("islarge") {
So ist es richtig: if ($el.hasClass("islarge")) {
Wenn Du dich intensiver mit JS beschäftigst, solltest Du dich mit der Fehlerkonsole vertraut machen, die zeigt einem so etwas sofort an.
Im Firefox: Extras - WebEntwickler - Web-Konsole

 

[LikeStar]

Da fehlt eine schließende Klammer:

Funktioniert wunderbar.

Da hat eine ")" Klammer gefehlt. Ouh man, was man Alles beachten muss.