Metodi hide i show u jQuery
Efekti omogućavaju animiranje elementa,
na primer - da ga glatko sakrijete ili prikažete. Za
svaki efekat postoje svoje
metode u jQuery. Počnimo sa metodima
hide i
show.
Metodi hide i show omogućavaju
sakrivanje i prikazivanje elemenata. Pogledajmo kako funkcionišu.
Za početak, uzmimo sledeći HTML kod:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">text...</div>
CSS kod izgleda ovako:
#elem {
padding: 10px;
width: 150px;
height: 150px;
border: 1px solid green;
margin-top: 10px;
}
Sada napišimo Javascript kod, prema kojem
na klik na dugme #hide
element će se sakriti, a na klik na
#show - prikazati:
$('#hide').click(function() {
$('#elem').hide();
});
$('#show').click(function() {
$('#elem').show();
});
Možete postaviti vreme trajanja efekta u
milisekundama (1000 milisekundi = 1 sekunda).
U ovom slučaju, efekat će se glatko izvoditi
u toku zadatog vremena. Postavimo
vreme trajanja efekta na 1 sekundu
i pogledajmo kako se efekat menja:
$('#hide').click(function() {
$('#elem').hide(1000);
});
$('#show').click(function() {
$('#elem').show(1000);
});
Data je sledeća razrada:
<p>
<a id="hide" href="">hide</a> <a id="show" href="">show</a>
</p>
<div id="block">
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</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;
}
Učinite tako da na klik na link sa
#hide div, koji sadrži listu, se sakrije, a na
link sa #show se prikaže. Za svaki
efekat zadajte vreme izvršavanja od 600ms.