Эффекты fadeIn и fadeOut

jQuery для начинающих
Ответить
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург

Эффекты fadeIn и fadeOut

Сообщение Александр »

Эффекты fadeIn и fadeOut

fadeIn() - показывает элемент, изменяя его прозрачность до 100%.
fadeout() - скрывает элемент, постепенно изменяя его прозрачность до нуля.

Пример работы скрипта http://flapps.ru/example/jquery/fadein-fadeout.html

Используется так же как show() и hide(), slideDown() и slideUp() только эффект скрытия и отображения другой.

Код: Выделить всё

  1. <html>
  2. <head>
  3. <title>jquery fadein fadeout</title>
  4. <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  5. <script type="text/javascript">
  6. $(function (){  
  7.     // при клике на hide_btn
  8.     $('#hide_btn').click(function() {
  9.         // скрываем элемент с id="block"
  10.         $('#block').fadeOut();
  11.     });
  12.  
  13.     // при клике на show_btn
  14.     $('#show_btn').click(function() {
  15.         // показываем элемент с id="block"
  16.         $('#block').fadeIn();
  17.     });
  18. });
  19. </script>
  20. </head>
  21. <body>
  22. <input type="button" id="hide_btn" value="Скрыть" />
  23. <input type="button" id="show_btn" value="Показать" />
  24. <div id="block">Скрывать и показывать будем этот блок</div>
  25. <br /><a href="http://flapps.ru">http://flapps.ru</a>
  26. </body>
  27. </html>
Ответить