Страница 1 из 1

Hide/Show

Добавлено: 20 мар 2011, 14:53
Александр
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. О использовании этого метода в другом уроке.

Re: Hide/Show

Добавлено: 16 окт 2011, 19:05
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');