jQueryn hide- ja show-metodit
Animaatiot mahdollistavat elementin animoinnin,
esimerkiksi sen peittämisen tai näyttämisen sulavasti.
Jokaiselle animaatiolle on oma jQuery-metodinsa. Aloitetaan
hide- ja
show-metodeista.
hide- ja show-metodit mahdollistavat
elementtien piilottamisen ja näyttämisen. Tarkastellaan niiden toimintaa.
Aluksi otamme seuraavan HTML-koodin:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">teksti...</div>
CSS-koodi näyttää tältä:
#elem {
padding: 10px;
width: 150px;
height: 150px;
border: 1px solid green;
margin-top: 10px;
}
Kirjoitetaan nyt Javascript-koodi, jonka mukaan
#hide-painiketta napsautettaessa
elementti piilotetaan ja
#show-painiketta napsautettaessa - näytetään:
$('#hide').click(function() {
$('#elem').hide();
});
$('#show').click(function() {
$('#elem').show();
});
Animaation suoritusaika voidaan asettaa
millisekunteina (1000 millisekuntia = 1 sekunti).
Tässä tapauksessa animaatio toistuu sulavasti
annetun ajan. Asetetaan
animaation suoritusajaksi 1 sekunti
ja katsotaan, kuinka animaatio muuttuu:
$('#hide').click(function() {
$('#elem').hide(1000);
});
$('#show').click(function() {
$('#elem').show(1000);
});
Annettu HTML-sivu:
<p>
<a id="hide" href="">hide</a> <a id="show" href="">show</a>
</p>
<div id="block">
<ol>
<li>teksti</li>
<li>teksti</li>
<li>teksti</li>
<li>teksti</li>
<li>teksti</li>
<li>teksti</li>
<li>teksti</li>
<li>teksti</li>
<li>teksti</li>
<li>teksti</li>
</ol>
</div>
body {
font-size: 18px;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ol {
margin: 0px;
padding-left: 10px;
}
li {
list-style-type: inside;
}
div {
display: inline-block;
padding: 30px;
border: 1px solid black;
cursor: pointer;
margin-bottom: 20px;
}
Tee niin, että linkkiä, jossa on
#hide, napsautettaessa lista sisältävä div piilotetaan, ja
linkkiä, jossa on #show, napsautettaessa se näytetään. Aseta kummallekin
animaatiolle suoritusaika 600ms.