25
Jun
Willkommen zu Tag zwei zu unserem Tutorial jQuery für Anfänger. Im ersten Tag habe ich euch erklärt, wie Ihr die jQuery libary in euer Dokument einbindet und eure erste kleine Javascript Funktion ausführt. Wir haben gestern den Effekt
fadeOut kennen gelernt, heute möchte ich euch zeigen, wie Ihr euer Element mit dem Effekt
slideDown zum sliden bringen könnt, wie man es z.B aus sogenannten Contentslidern kennt. Unser Beispiel slideDown Effekt Wir öffnen unser Dokument, was wir gestern erstellt haben. Wir möchten nun unser Element den Effekt slide zuweisen, sodass es von oben nach unten "slided" innerhalb von vier Sekunden. Wir gehen also in unsere kleine Javascript Zeile wo wir folgenden Code stehen haben.
…
$(function() { $(’a’).click(function() { $(’#container’).fadeOut(); }); });
…
Hier haben wir den Effekt fadeOut, ersetzen wir nun diesen Befehl in
slideDown, so sollte das Element von oben nach unten sliden. Versuchen wir es einmal ... klappt noch nicht wirklich oder? Wir müssen natürlich noch unserem div Element sagen, zeige dich nicht. Dafür nutzen wir einfach die CSS Eigenschaft
display:none;. Wir gehen also in unseren kleinen CSS Code und fügen die Eigenschaft display:none; hinzu. Wir sollten nun folgenden kleinen CSS Code der ID container haben.
#container {
width:200px;
height:200px;
background:red;
display:none;
} Versuchen wir es noch einmal, wir aktualisieren unser Dokument und sehen, dass unser div Element nicht angezeigt wird. Klicken wir nun aber auf unseren Link "Klick Mich!", slided unser div Element von oben nach unten. Soweit so gut, nun geht uns das ganze aber zu schnell und wir möchten gerne, dass unser Element vier Sekunden benötigt um von oben nach unten zu sliden. Dafür gehen wir wieder in unsere kleine Javascript Zeile, dass unser div Element mit der ID container aufruft.
<head>…
<script type=”text/javascript”>
$(function() {
$(’a').click(function() {
$(’#container’).slideDown();
});
});
</script>
…</head>
Ihr habt euch sicherlich in den vorherigen Beispielen gewundert, waren hinter unserem fadeOut und slideDown zwei Klammern sind, die sich direkt wieder schliessen. Nun, in diesen Klammern können wir z.B sagen, slide innerhalb von 4 Sekunden nach unten. Hierfür fürgen wir in die Klammer eine 4000 ein. Warum 4000? Das ganze wird in millisekunden berechnet, dass heisst 4000 millisekunden sind 4 Sekunden. Wir fügen also unsere 4000 in unsere Klammer ein. Wir müssten nun folgenden Javascript Code haben
<head>…
<script type=”text/javascript”>
$(function() {
$(’a').click(function() {
$(’#container’).slideDown(4000);
});
});
</script>
…</head>
Nun slided unser div Element innerhalb von vier Sekunden von oben nach unten. Ziemlich einfach oder? Ich hoffe ich konnte euch jQuery wieder etwas näher bringen und hoffe wir sehen uns morgen, über Kommentare würde ich mich natürlich freuen :)
test