Методе hide и show у jQuery-у
Ефекти омогућавају анимирање елемента,
на пример - полако га сакрити или приказати. За
сваки ефекат постоје одређени
методи у jQuery-у. Почнимо са методима
hide и
show.
Методи hide и show омогућавају
сакривање и приказивање елемената. Погледајмо како раде.
За почетак, узмимо следећи HTML код:
<button id="hide">hide</button>
<button id="show">show</button>
<div id="elem">text...</div>
CSS код изгледа овако:
#elem {
padding: 10px;
width: 150px;
height: 150px;
border: 1px solid green;
margin-top: 10px;
}
Сада ћемо написати Javascript код, према коме
при клику на дугме #hide
елемент ће бити сакривен, а при клику на
#show - приказан:
$('#hide').click(function() {
$('#elem').hide();
});
$('#show').click(function() {
$('#elem').show();
});
Може се задати време трајања ефекта у
милисекундама (1000 милисекунди = 1 секунда).
У том случају, ефекат ће се глатко одиграти
током задатог времена. Хајде да задамо
време трајања ефекта од 1 секунди
и погледајмо како се ефекат мења:
$('#hide').click(function() {
$('#elem').hide(1000);
});
$('#show').click(function() {
$('#elem').show(1000);
});
Дата је верстка:
<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;
}
Направите тако да при клику на линк са
#hide див, који садржи листу, буде сакривен, а при
клику на линк са #show буде приказан. За сваки
ефекат задајте време трајања од 600ms.