Плавно скрыть слой (jQuery)

Чтобы скрыть слой при помощи jQuery используется функция .hide(). В качестве параметра можно передать скорость исчезания слоя, например ('slow', 'fast' или числовые значение в миллисекундах).

Пример

Задача: Есть кнопка при нажатии на которую нужно плавно убрать слой.

Смотреть онлайн пример.

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Плавно скрыть слой (jQuery)</title> <script type="text/javascript" src="/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#hide').click(function(){ $('#layer').hide('slow'); }); }); </script> <style type="text/css"> #layer {border:#CCC 1px solid; line-height:1.5; padding:10px 20px; width:800px; margin-top:20px;} </style> </head><body> <input type="button" value="Плавно скрыть слой" id="hide"> <div id="layer">Но чтобы вы поняли, откуда возникает это превратное представление людей, порицающих наслаждение и восхваляющих страдания, я раскрою перед вами всю картину и разъясню, что именно говорил этот человек, открывший истину, которого я бы назвал зодчим счастливой жизни. Действительно, никто не отвергает, не презирает, не избегает наслаждений только из-за того, что это наслаждения, но лишь из-за того, что тех, кто не умеет разумно предаваться наслаждениям, постигают великие страдания. Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы само страдание только за то, что это страдание, а не потому, что иной раз возникают такие обстоятельства, когда страдания и боль приносят некое и немалое наслаждение. Если воспользоваться простейшим примером, то кто из нас стал бы заниматься какими бы то ни было тягостными физическими упражнениями, если бы это не приносило с собой некоей пользы? И кто мог бы по справедливости упрекнуть стремящегося к наслаждению, которое не несло бы с собой никаких неприятностей, или того, кто избегал бы такого страдания, которое не приносило бы с собой никакого наслаждения?</div> </body></html>

Примеры скорости появления

.hide(200) — слой будет показан в течение 0.2 секунд, тоже самое что и .hide('fast').

.hide(600) — слой будет показан в течение 0.6 секунд, тоже что и .hide('slow').

.hide(1000) — в течение 1 секунды.

.hide(5000) — в течение 5 секунд.

Категории

ПрограммированиеJavaScriptБиблиотекиjQuery

Читайте также

Комментарии