WEAVE 05.09 – Animierte Button erzeugen mit jQuery

fwolf — Tue, 25 Aug 2009 05:00:17 +0000

jQuery als Flash-Alternative

Das JavaScript-Framework jQuery erzeugt mit wenigen Zeilen Code sehr professionell wirkende Animationen. Anhand des folgenden Quellcodes von Johannes Kretschmar und Daniel Mies können Sie damit beispielsweise in nur 60 Minuten eine interaktive Karte erstellen.

GRUNDLEGENDES

Basis von jQuery ist die so genannte jQuery-Funktion:
$('p').hide();

Mögliche Beispiele für die Verwendung von Selektoren sind:
$('p') – jeder Absatz im Objekt
$('div > p') – jeder Absatz der Kindelement eines div-Element
$('ul.klasse li:first') – das erste li-Element in der unsortierten Liste mit der Klasse “klasse”
$('h1, h2, h3, h4, h5, h6') – alle Überschriften

Mögliche Funktionen, die auf selektierte Elemente angewendet werden können, sind zum Beispiel:
.hide() – das Element wird versteckt
.show() – das versteckte Element wird angezeigt
.fadeIn() – das Element wird langsam eingeblendet
.slideDown() – das Element wird von oben nach unten ausgefahren

Viele weitere Beispiele für Selektoren und Methoden finden Sie in der sehr ausführlichen Dokumentation unter http://docs.jquery.com

DAS GRUNDGERÜST


	 
Stadtkirche

DAS ERSTE ANIMIERTE ELEMENT MIT jQUERY

Laden Sie die jQuery-Quelldatei von http://www.jquery.com herunter und benennen Sie diese um in jquery.js. Dann binden Sie sie über
in den >head<-Bereich Ihrer Webseite ein.

Codegerüst, in das Sie Ihren Code einfügen müssen:

Die jQuery-Anweisungen hide[] und hover[]:

$(".infobox_wrapper h2").hide();
$(".infobox_wrapper img").hover(
  function(){ $(this).next().fadeIn(500); },
  function(){ $(this).next().fadeOut(500); }
);

DER AUSKLAPPTEXT

Der Ausklapptext soll zunächst unsichtbar sein:

$(".infobox_text").hide();
$(".infobox_wrapper img").click(
  function() {$(this).nextAll(".infobox_text").slideDown(500);}
);

Zustände speichern:

$(".infobox_wrapper img").data("clicked",false);

Die Fallunterscheidung:

$(".infobox_wrapper img").click(
	function() {
		if ($(this).data("clicked") == true)
		{
			$(this).nextAll(".infobox_text").slideUp(500);
			$(this).data("clicked",false);
		}
		else
		{
			$(this).nextAll(".infobox_text").slideDown(500);
			$(this).data("clicked",true);
		}
	}
);

Erweiterung:

$(".infobox_wrapper img").hover(
	function() {
		$(this).next().fadeIn(500);
	},
	function() {
		if ($(this).data("clicked") == false)
		{
			$(this).next().fadeOut(500);
		}
	}
);

EINE WEITERE ZOOMSTUFE



    
	... InfoPunkte Zoomstufe 1 ...
  

    
	... InfoPunkte Zoomstufe 2 ...

Aktuellen Zoom-Container verstecken:

$(".zoomOut").click(
			function() {
				$(this).parent(".zoom").hide();
				$(this).parent(".zoom").next(".zoom").show();
				$("#karte").css("background-image","url(karte_out.jpg)");
				}
			);
$(".zoomIn").click(
			function() {
				$(this).parent(".zoom").hide();
				$(this).parent(".zoom").prev(".zoom").show();
				$("#karte").css("background-image","url(karte_in.jpg)");
				}
			);

Alle Zoomstufen verstecken und ersten Zoom-Container anzeigen:

$(".zoom").hide();
$(".zoom:first").show();

WAS IST, WENN KEIN JAVASCRIPT AKTIVIERT IST

Zoom-out-Button über jQuery explizit wieder hervorholen:

$(".zoomOut").show();

Erweiterung:

Weave » Development

WEAVE 03.10 – iPad App-Entwicklung

Höher, breiter, weiter