Anzeige
Tutorialbeschreibung

jQuery - Animation mit wenigen Zeilen

jQuery - Animation mit wenigen Zeilen

Hier zeige ich euch, wie man mit Hilfe von jQuery mit wenigen Zeilen Code Inhalte animiert ein- und ausblenden kann.


Javascript-Frameword jQuery bietet mehrere vorgefertigte Möglichkeiten, Inhalte animiert ein- und auszublenden. Was als Ergebnis sehr anspruchsvoll aussieht, wird in Wirklichkeit mit nur wenigen Zeilen Code erstellt.

Schritt 1:
Erstellen wir als Erstes ein neues HTML-Dokument mit Links zum Ein- und Ausblenden des Bereichs und dem auszublendenden Bereich selbst.
Die Einbindung von jQuery wird auch direkt im head-Bereich vorgenommen.
 

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Animation mit jQuery</title>
<style type="text/css">
<!--
#bereich {
	border: 2px solid blue; 
	background: #aaa;
	width: 100px;
	height: 30px;
	margin-top: 50px;
	font: 15pt Arial;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>

</head>
<body>
<a href="#" id="einblenden1">einblenden</a> <a href="#" id="ausblenden1">ausblenden</a><br />
<a href="#" id="einblenden2">einblenden</a> <a href="#" id="ausblenden2">ausblenden</a><br />
<a href="#" id="einblenden3">einblenden</a> <a href="#" id="ausblenden3">ausblenden</a><br />

<div id="bereich">Inhalt</div>

</body>
</html>


Schritt 2:


Jetzt zum Code. Zunächst mal die Theorie. Wir sollten dafür sorgen, dass unser Skript nur ausgeführt wird, wenn die gesamte HTML-Struktur schon geladen ist.
Dafür gibt es die .ready() Methode.
 

$(document).ready(
	function() {	}
);
Ich benutze meistens die Kurzform
$(
	function() {	}
);
Da unser Bereich bei einem Klick auf den entsprechenden Link ein- und ausgeblendet werden soll, benutzen wir .click()
$("#einblenden1").click(function(){});
Zwischen die geschweiften Klammern schreiben wir jetzt, was dabei geschehen soll:
$("#bereich").show("600");  
So wird unser Bereich animiert eingeblendet und zwar innerhalb von 600 Milisekunden. Zum Ausblenden wird .hide() verwendet
$("#bereich").hide("600");   
Zusammengebaut sieht es so aus:
		$("#einblenden1").click(function(){
			$("#bereich").show("600");
		});
		
		$("#ausblenden1").click(function(){
			$("#bereich").hide("600");
		});
Jetzt machen wir dasselbe noch mit fadeIn/fadeOut und slideDown/slideU.
		$("#einblenden2").click(function(){
			$("#bereich").fadeIn("600");
		});
		
		$("#ausblenden2").click(function(){
			$("#bereich").fadeOut("600");
		});
		
		$("#einblenden3").click(function(){
			$("#bereich").slideDown("600");
		});
		
		$("#ausblenden3").click(function(){
			$("#bereich").slideUp("600");
		});
Schritt 3: Zum Schluss die vollständige Datei:
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Animation mit jQuery</title>
<style type="text/css">
<!--
#bereich {
	border: 2px solid blue; 
	background: #aaa;
	width: 100px;
	height: 30px;
	margin-top: 50px;
	font: 15pt Arial;
}
-->
</style>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(
	function()
	{
		$("#einblenden1").click(function(){
			$("#bereich").show("600");
		});
		
		$("#ausblenden1").click(function(){
			$("#bereich").hide("600");
		});
		
		$("#einblenden2").click(function(){
			$("#bereich").fadeIn("600");
		});
		
		$("#ausblenden2").click(function(){
			$("#bereich").fadeOut("600");
		});
		
		$("#einblenden3").click(function(){
			$("#bereich").slideDown("600");
		});
		
		$("#ausblenden3").click(function(){
			$("#bereich").slideUp("600");
		});
	}
);

</script>

</head>
<body>
<a href="#" id="einblenden1">einblenden</a> <a href="#" id="ausblenden1">ausblenden</a><br />
<a href="#" id="einblenden2">einblenden</a> <a href="#" id="ausblenden2">ausblenden</a><br />
<a href="#" id="einblenden3">einblenden</a> <a href="#" id="ausblenden3">ausblenden</a><br />

<div id="bereich">Inhalt</div>

</body>
</html>

Bitte daran denken, dass im selben Verzeichnis auch die jQuery-Datei liegen muss. Ich hoffe, es war alles soweit verständlich, war mein erstes Tutorial.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von JUJU333
  • 02.11.2010 - 18:09

Vielen Dank! Genau was ich gesucht hatte ! Gut erklärt!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.02.2010 - 09:25

Klasse, vielen Dank.

Portrait von dickerfreddy
  • 07.02.2010 - 22:12

Danke hat mir geholfen und ich hoffe ich kann es so umsetzen, Danke

Portrait von kiteflier68
  • 06.02.2010 - 17:02

Gute Anleitung, leicht zu begreifen und nachzumachen.
Ideal für Einsteiger.

Portrait von eldibujante
Portrait von romox
  • 05.02.2010 - 14:49

Danke snake. Also das Tut ist eher für die, die von jQuery zum ersten Mal hören und direkt mal etwas tolles machen wollen. Besser ist es, animate zu nutzen und nicht auf die fertigen Funktionen zurück zu greifen, da es dann schneller läuft. Aber für den Anfang ist das Tut eigentlich perfekt :)

Portrait von tfhsnak3
  • 05.02.2010 - 14:33

5* cooles Tut, gleich mal testetn ;)

Portrait von romox
  • 03.02.2010 - 11:22

Ist auch im Prinzip alles einfach. Z.B. Fehlt im reinen JS getElementsByClass, in jQ ist aber diese Möglichkeit und sehr viele andere, die das Leben erleichtern, eingebaut.

Livedemo findet ihr hier:
http://sakulin.de/jquery/1/

Wie gesagt, ist mein erstes Tut, deshalb bitte auf Fehler hinweisen, damit ichs beim nächsten Mal besser mache

Portrait von Findwas
  • 03.02.2010 - 11:12

Klingt ja fast so, als ob es total einfach wäre.
So nun fehlt eigentlich nur noch die "Vorschau" Macht aber nix, ich teste es sowie so aus

Findwas

Portrait von romox
  • 03.02.2010 - 07:11

Hehe, das ist praktisch die jQuery Datei, die ich bei mir local abgelegt habe. Schau hier: Bitte daran denken, dass im selben Verzeichnis auch die jQuery-Datei liegen muss. Also einfach die aktuelle Version downloaden, in jquery.js umbenennen um im selben Verzeichnis ablegen oder den Pfand entsprechend anpassen, z.B. so:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js

So wird jQuery direkt von Google geladen.

Beim Einsatz auf einer Website hat das übrigens den Vorteil, dass diese Datei höchstwahrscheinlich schon im cache vorliegt und die Ladezeit verkürzt.

Portrait von garugc
  • 03.02.2010 - 10:37

Hat funktioniert. Vielen Dank!

Portrait von garugc
  • 02.02.2010 - 19:21

Blöde Frage: Was kommt in die jquery.js rein?
Hoffe, ich steh jetzt nicht völlig dumm da :-)

Portrait von romox
  • 02.02.2010 - 10:27

Vielen Dank, wenn das Tut euch gefällt, werde ich versuchen noch mehr von solchen zu schreiben, soweit es die Zeit erlaubt

Portrait von Pepeperez
  • 02.02.2010 - 08:54

Eine gute schritt für schritt Anleitung. Ideal für den Einstieg. Danke für das Tut.

x
×
×