Viser, Hiding, Sliding, og Fading Elements med jQuery

May 24  by Eliza

jQuery effekter er mye moro og kan forvandle en enkel, statisk webside til en dynamisk, interaktiv opplevelse for nettstedet besøkende. Del av det visuelle interesse som jQuery tilbyr er evnen til å vise, skjule, sklie, og visne elementer. Eksemplene som følger alle bruker denne eksempelkode:

<Html>
<Head>
<Title> Min testside </ title>
<Script type = "text / javascript" src = "js / jquery-1.4.min.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
// Din koden går her.
});
</ Script>
</ Head>
<Body>
<Div id = "hideme"> Dette er synlig. </ Div>
<Div style = "display: none" id = "ShowMe"> Dette er skjult </ div>.
<Input id = "ShowMe" value = "doSomething" type = "submit">
</ Body>
</ Html>

Her er en rask oversikt på hvordan du bruker disse effektene til en <div> element på en webside.

Effekt Kode
Skjule $ (": Submit") klikk (function () {.
$ ("Div") hide ().;
});
Vis $ (": Submit") klikk (function () {.
$ ("# ShowMe") viser (.);
});
Skli ned $ (": Submit") klikk (function () {.
$ ("# ShowMe") slideDown (.);
});
Skyv opp $ (": Submit") klikk (function () {.
$ ("# Hideme") slideUp (.);
});
Fade inn $ (": Submit") klikk (function () {.
$ ("# ShowMe") fadeIn (.);
});
Fade ut $ (": Submit") klikk (function () {.
$ ("# Hideme") fadeout (.);
});