Tonen, Hiding, Glijden, en Fading Elementen met jQuery

jQuery effecten zijn erg leuk en kan een eenvoudige, statische webpagina te veranderen in een dynamische, interactieve ervaring voor de bezoeker van de site. Een deel van de visuele belang dat jQuery biedt, is de mogelijkheid om te laten zien, te verbergen, glijbaan, en fade-elementen. De voorbeelden die volgen allemaal gebruiken deze voorbeeldcode:

<Html>
<Head>
<Title> Mijn testpagina </ title>
<Script type = "text / javascript" src = "js / jquery-1.4.min.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
// De code gaat hier.
});
</ Script>
</ Head>
<Body>
<Div id = "HideMe"> Dit is zichtbaar. </ Div>
<Div style = "display: none" id = "showme"> Dit is verborgen </ div>.
<Input id = "showme" value = "doSomething" type = "submit">
</ Body>
</ Html>

Hier is een kort overzicht over hoe deze effecten toepassen op een <div> element op een webpagina.

Effect Code
Verbergen $ (": Submit") klik (function () {.
$ ("Div") te verbergen ().;
});
Tonen $ (": Submit") klik (function () {.
$ ("# Showme") geven ().;
});
Naar beneden glijden $ (": Submit") klik (function () {.
$ ("# Showme") slideDown (.);
});
Schuif omhoog $ (": Submit") klik (function () {.
$ ("# HideMe") slideUp (.);
});
Fade in $ (": Submit") klik (function () {.
$ ("# Showme") FadeIn ().;
});
Verdwijnen $ (": Submit") klik (function () {.
$ ("# HideMe") INof ().;
});