Hide/Show

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

Hide/Show

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

Hide/Show

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

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

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

<html><head><title>jquery hide show</title><script src="js/jquery-1.5.1.min.js" type="text/javascript"></script><script type="text/javascript">$(function (){      // при клике на hide_btn    $('#hide_btn').click(function() {         // скрываем элемент с id="block"        $('#block').hide();     });     // при клике на show_btn    $('#show_btn').click(function() {         // показываем элемент с id="block"        $('#block').show();     });});</script></head><body><input type="button" id="hide_btn" value="Скрыть" /><input type="button" id="show_btn" value="Показать" /><div id="block">Скрывать и показывать будем этот блок</div><br /><a href="http://flapps.ru">http://flapps.ru</a></body></html>
Тоже самое можно сделать с помощью метода toggle. О использовании этого метода в другом уроке.
turikhay
Сообщения: 26
Зарегистрирован: 01 фев 2011, 15:50

Re: Hide/Show

Сообщение turikhay »

Также вы можете "красиво" скрывать элементы. Если вы зададите функции .hide параметр типа slow, то она (функция) начнет анимировать скрытие элемента в соответствии с заданным параметром.
Попробуйте:

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

 <html>‬<head>‬<title>jquery hide show</title>‬<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>‬<script type="text/javascript">‬$(function (){  ‬    // при клике на hide_btn    $('#hide_btn').click(function() {         // скрываем элемент с id="block"        $('#block').hide('slow'); ‬    });‬ ‬    // при клике на show_btn‬    $('#show_btn').click(function() { ‬        // показываем элемент с id="block"‬        $('#block').show('slow'); ‬    });‬});</script>‪</head>‪<body>‪‬<input type="button" id="hide_btn" value="Скрыть" />‪‬<input type="button" id="show_btn" value="Показать" />‪<div id="block">Скрывать и показывать будем этот блок</div>‪<br /><a href="http://flapps.ru">http://flapps.ru</a>‪‬</body>‪</html> 
Также, вместо параметра slow (англ. медленно) Вы можете использовать fast (англ. быстро), либо указание времени в миллисекундах, например 3000 (3 секунды)
Примеры:

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

 $('#block').show('fast');$('#block').show('3000'); 
Ответить