С праздником Вас дорогие блондины и блондинки (натуральные) – ведь сегодня именно Ваш праздник. Кстати как заверяют ученые – людей со светлыми волосами с каждым годом все меньше, так как ген светлых волос – рецессивный – то есть уступает гену темных волос. Так что цените и любите друг-друга. Ну а теперь по теме – сегодня обратимся к jquery эффектам, которые используются чтобы показать или скрыть блок.

Немного теории

Объекты можно легко и просто скрывать меняя всего один css параметр – display, который отвечает за то, как будет отображаться тот или иной элемент. Но про плавность перехода здесь говорить не приходится, поэтому представляю Вам следующую альтернативу:

hide() – просто скрывает элемент, причем молниеносно.
hide(speed,[fn]) – скроет элемент за время speed и после этого вызовет функцию [fn] один раз.
show() – отобразит элемент, причем молниеносно.
show(speed,[fn]) – отобразит элемент за время speed и после этого вызовет функцию [fn] один раз.
toggle() – скроет или отобразит элемент (в зависимости от текущего состояния), причем молниеносно.
toggle(switch) – скроет или отобразит элемент (в зависимости от значения булевой переменной switch), причем молниеносно. Если
switch = true – отобразит элемент
switch = false – скроет элемент
toggle(speed,[fn]) – скроет или отобразит элемент (в зависимости от текущего состояния), за время speed и после этого вызовет функцию [fn] один раз.

speed – может принимать либо строковый параметр: slow, normal, fast, либо значение в миллисекундах
[fn] – не обязательный параметр

Практический пример

Создаем див, и 8 кнопок к нему:

<input type="button" value="hide" onclick="$('div.container').hide();">
<input type="button" value="hide Speed" onclick="$('div.container').hide('slow');">
<input type="button" value="show" onclick="$('div.container').show();">
<input type="button" value="show Speed" onclick="$('div.container').show('slow');">
<input type="button" value="toggle" onclick="$('div.container').toggle();">
<input type="button" value="toggle=true" onclick="$('div.container').toggle(1>0);">
<input type="button" value="toggle=false" onclick="$('div.container').toggle(1>10);">
<input type="button" value="toggle speed" onclick="$('div.container').toggle('slow');">
<div class="container">
<img src="pokazat-ili-skrit-block.jpg">
</div>

Теперь тестируем  наш jquery пример показать / скрыть элемент.

Как видите здесь эффект скрытия и отображения элемента достигается не просто путем изменения css параметра display, также изменяются значения ширины, высоты и прозрачности элемента, и что самое приятное все это происходит плавно. Если что-то пошло не так, то качаем пример к уроку показать или скрыть блок плавно.