jQuery - Elemente ein und ausblenden

jQuery - Elemente ein und ausblenden

Generell stellt jQuery drei grundliegende Funktionen bereit, die es erlauben, Elemente ein bzw. auszublenden.

Elemente ausblenden
.hide()

Elemente einblenden
.show()

Mit toggle werden versteckte Elemente sichtbar und sichtbare Elemente ausgeblendet.
Diese Funktion ist sehr praktisch, wenn z.B. ein Element bei einen Klick auf einen Button immer ein und ausgeklappt werden soll.
.toggle()

All diese Funktionen nutzen dabei den css-style display: none zum ausblenden.
Zum einblenden wird je nach Element mit display der entsprechende Typ gesetzt.
Bei Tabellen z.B. display: table.

Neben diesen einfachen Funktionen kann jQuery natürlich noch weitaus mehr.
Besonders interessant wird es mit Effekten.
Hier bietet jQuery eine ganze Menge an Möglichkeiten, so könnt ihr z.B. ein Element mit fadeOut() ausblenden, wobei hier die Transparenz reduziert wird, bis das Element nicht mehr sichtbar ist.

Alle Funktionen bieten darüber hinaus noch die Möglichkeit an, über speed die Geschwindigkeit anzugeben (in Milisekunden), mit der der Effekt durchgeführt wird und ein Callback anzugeben, dass aufgerufen wird nachdem die Animation ausgeführt wurde
So könnt ihr z.B. ein Element erst in der Breite vergrößern und danach die Farbe ändern.
Probiert hier einfach mal rum.

Eine Liste mit möglichen Effekten könnt ihr natürlich in der jQuery Dokumentation finden.
jQuery Effekte
Um einen Kommentar zu hinterlassen, ist eine Anmeldung erforderlich.