Hide/Show

jQuery для начинающих

Hide/Show

Сообщение Александр » 20 мар 2011, 14:53

Hide/Show

Метод hide - скрываетэлемент, show - отображает.

Пример работы скрипта Чтобы увидеть ссылку - зарегистрируйтесь

  1. <html>
  2. <head>
  3. <title>jquery hide show</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').hide();
  11.     });
  12.  
  13.     // при клике на show_btn
  14.     $('#show_btn').click(function() {
  15.         // показываем элемент с id="block"
  16.         $('#block').show();
  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>


Тоже самое можно сделать с помощью метода toggle. О использовании этого метода в другом уроке.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: Hide/Show

Сообщение turikhay » 16 окт 2011, 19:05

Также вы можете "красиво" скрывать элементы. Если вы зададите функции .hide параметр типа slow, то она (функция) начнет анимировать скрытие элемента в соответствии с заданным параметром.
Попробуйте:
  1.  
  2. <html>
  3. ‬<head>
  4. ‬<title>jquery hide show</title>
  5. ‬<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  6. ‬<script type="text/javascript">
  7. ‬$(function (){  
  8. ‬    // при клике на hide_btn
  9.     $('#hide_btn').click(function() {
  10.         // скрываем элемент с id="block"
  11.         $('#block').hide('slow');
  12. ‬    });
  13. ‬    // при клике на show_btn
  14. ‬    $('#show_btn').click(function() {
  15. ‬        // показываем элемент с id="block"
  16. ‬        $('#block').show('slow');
  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>
  28.  

Также, вместо параметра slow (англ. медленно) Вы можете использовать fast (англ. быстро), либо указание времени в миллисекундах, например 3000 (3 секунды)
Примеры:
turikhay

 
Сообщения: 26
Зарегистрирован: 01 фев 2011, 15:50
Благодарил (а): 5 раз.
Поблагодарили: 1 раз.


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в Уроки jQuery



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron