Методы 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 показывался. Для каждого
эффекта задайте время выполнения в 600мс.