Необходимо скрывать и показывать элементы с использованием эффекта "затухания".
Решение
Для решения применим методы fadeOut(), fadeIn() и fadeToggle() (листинг 3.2.2).
Листинг3.2 .2 . Использование методов fadeOut(), fadeIn() и fadeToggle()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>example-3-2-2</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> <style type="text/css"> div { border:1px dotted #369; padding:5px; color:#00f; } .result { border-bottom:1px dotted #369; } </style> <script type="text/javascript"> $(function(){ $("button:eq(0)").click(function(){ $("#test").fadeOut(2500,function(){ $("p:first").text("fadeOut"); }); }); $("button:eq(1)").click(function(){ $("#test").fadeIn(2500,function(){ $("p:first").text("fadeIn"); }); }); $("button:eq(2)").click(function(){ $("#test").fadeToggle(800,function(){ $("p:first").text("fadeToggle"); }); }); }); </script> </head> <body> <p class="result"> </p> <button>Hide</button><button>Show</button><button>Toggle</button> <p>Я шел, спускаясь в темные коридоры, и потом опять поднимаясь наверх. Я был один. Я кричал, мне не отвечали — я был один в этом обширном, запутанном, как лабиринт, доме.</p> <p><em>Ги де Мопассан</em></p> </body> </html> |
Обсуждение
HTML-код в листинге 3.2.2 нам тоже знаком. В JavaScript-коде можно легко разобраться на основании предыдущих примеров. Методы fadeIn(), fadeOut() и
fadeToggle() принимают такие же аргументы — время, за которое выполняется эффект, и функция, вызываемая при завершении эффекта.
ПРИМЕЧАНИЕ
Методы fadeIn(), fadeOut() и fadeToggle() могут принимать еще один аргумент — название эффекта плагина easing, с использованием которого может происходить скрытие/отображение элемента, например fadeIn(3000, ‘swing’, fn). По умолчанию возможны эффекты swing и linear. Больше эффектов даст подключение плагина easing. Подробнее см. http://jqueryui.com/demos/effect/#easing.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)