Lernen mit JQuery: Fading Menu – Inhalte ersetzen

Je mehr ich über jQuery lerne, desto natürlicher fühlt es sich an. Wahrscheinlich, weil es so eng mit CSS verbunden ist. Aus Designperspektive ist die Syntax für jQuery

„Wenn ich dies tue, lasse CSS dies tun.“

Der gebräuchlichere Slogan ist

Finde etwas, tue etwas.

…was auch großartig ist.

Anstatt CSS als Seitenlayout und zur Formatierung Ihrer Seite beim Laden zu betrachten, können Sie es nun für Animationen verwenden und es dynamisch ändern, um auf Ereignisse zu reagieren, die auf Ihrer Seite auftreten. Nehmen wir zum Beispiel ein Menü. Sie können das „Klick“-Ereignis, das beim Klicken auf ein Menü auftritt, nutzen, um viele Dinge zu tun.

Diese Beispielseite hat drei Menüpunkte und drei Inhaltsbereiche: Home, About und Contact. Standardmäßig ist der Home-Button ausgewählt, was bedeutet, dass seine Menügrafik volle Deckkraft hat und sein Inhaltsbereich angezeigt wird.

#home {
	display: block;
	padding: 30px;
}
#home-button {
	opacity: 1.0;
	border-bottom: 1px solid black;
}

Standardmäßig sind die anderen Menüpunkte ausgeblendet und ihre Inhaltsbereiche versteckt, wie hier

#about {
	display: none;
	padding: 30px;
}
#about-button {
	opacity: 0.5;
	border-bottom: 1px solid black;
}

Mit jQuery können wir auf dieses Klick-Ereignis lauschen und entsprechend handeln. Dies ist, was passieren soll

• BLENDE das angeklickte Menüelement EIN.
• BLENDE alle anderen Menüpunkte AUS.
• ZEIGE den entsprechenden Inhaltsbereich an.
• VERSTECKE alle anderen Inhaltsbereiche.

Da der Home-Button standardmäßig aktiv ist, betrachten wir nun den jQuery-JavaScript-Code für den About-Button

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#about-button").click(function(){ 
			$(this).animate({ 
				opacity: 1.0,
				borderWidth: 5
			}, 600 );
			$("#home")
				.css({
					display: "none"
				});
			$("#about")
				.css({
					display: "block"
				});
			$("#contact")
				.css({
					display: "none"
				});
			$("#home-button").animate({ 
				opacity: 0.5,
				borderWidth: 1
			}, 600 );
			$("#contact-button").animate({ 
				opacity: 0.5,
				borderWidth: 1
			}, 600 );
		});
	});
</script>

Ihr vollständiger JavaScript-Code würde für alle drei Buttons ähnliche Blöcke enthalten. Wie ich bereits erwähnt habe, lerne ich hier gerade, also gibt es wahrscheinlich einen intelligenteren Weg, dies zu schreiben, aber dies sind die Grundlagen und sie funktionieren.

UPDATE: Das ist viel intelligenter.

$("#page-wrap div.button").click(function(){
	
	$clicked = $(this);
	
	// if the button is not already "transformed" AND is not animated
	if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
		
		$clicked.animate({
			opacity: 1,
			borderWidth: 5
		}, 600 );
		
		// each button div MUST have a "xx-button" and the target div must have an id "xx" 
		var idToLoad = $clicked.attr("id").split('-');
		
		//we search trough the content for the visible div and we fade it out
		$("#content").find("div:visible").fadeOut("fast", function(){
			//once the fade out is completed, we start to fade in the right div
			$(this).parent().find("#"+idToLoad[0]).fadeIn();
		})
	}
	
	//we reset the other buttons to default style
	$clicked.siblings(".button").animate({
		opacity: 0.5,
		borderWidth: 1
	}, 600 );
	
});