Плавное появление (jQuery)

Используя функцию .show() в jQuery, можно задавать скорость, передав параметр. Можно передать число в миллисекундах или текстовые значения "fast" и "slow", 200мс и 600мс соответственно.

Пример

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

Онлайн пример.

<!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(){ $('#show').click(function(){ $('#layer').show('slow'); }); }); </script> </head> <body> <input type="button" value="Показать слой плавно" id="show"> <div id="layer" style="display:none;">Но чтобы вы поняли, откуда возникает это превратное представление людей, порицающих наслаждение и восхваляющих страдания, я раскрою перед вами всю картину и разъясню, что именно говорил этот человек, открывший истину, которого я бы назвал зодчим счастливой жизни. Действительно, никто не отвергает, не презирает, не избегает наслаждений только из-за того, что это наслаждения, но лишь из-за того, что тех, кто не умеет разумно предаваться наслаждениям, постигают великие страдания. Равно как нет никого, кто возлюбил бы, предпочел и возжаждал бы само страдание только за то, что это страдание, а не потому, что иной раз возникают такие обстоятельства, когда страдания и боль приносят некое и немалое наслаждение. Если воспользоваться простейшим примером, то кто из нас стал бы заниматься какими бы то ни было тягостными физическими упражнениями, если бы это не приносило с собой некоей пользы? И кто мог бы по справедливости упрекнуть стремящегося к наслаждению, которое не несло бы с собой никаких неприятностей, или того, кто избегал бы такого страдания, которое не приносило бы с собой никакого наслаждения?</div> </body> </html>

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

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

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

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

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

Категории

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

Комментарии