Metódy hide a show v jQuery
Efekty umožňujú animovať prvok,
napríklad - plynulo skryť alebo zobraziť ho. Pre
každý efekt existujú svoje
metódy jQuery. Začnime s metódami
hide a
show.
Metódy hide a show umožňujú
skrývať a zobrazovať prvky. Pozrime sa na ich fungovanie.
Na začiatok vezmime nasledujúci HTML kód:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">text...</div>
CSS kód vyzerá takto:
#elem {
padding: 10px;
width: 150px;
height: 150px;
border: 1px solid green;
margin-top: 10px;
}
Teraz napíšme Javascript kód, podľa ktorého
po kliknutí na tlačidlo #hide
sa prvok skryje, a po kliknutí na
#show - zobrazí:
$('#hide').click(function() {
$('#elem').hide();
});
$('#show').click(function() {
$('#elem').show();
});
Je možné zadať čas vykonania efektu v
milisekundách (1000 milisekúnd = 1 sekunda).
V tomto prípade sa efekt bude plynule prehrávať
počas zadaného času. Zadajme
čas vykonania efektu 1 sekundu
a pozrime sa, ako sa efekt zmení:
$('#hide').click(function() {
$('#elem').hide(1000);
});
$('#show').click(function() {
$('#elem').show(1000);
});
Dané HTML:
<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;
}
Urobte tak, aby po kliknutí na odkaz s
#hide sa div obsahujúci zoznam skryl, a po
kliknutí na odkaz s #show sa zobrazil. Pre každý
efekt zadajte čas vykonania 600ms.