# Методы 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мс`.

← →
↑