Немного теории. Объекты можно легко и просто скрывать меняя всего один 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] – не обязательный параметр
Практический пример
Создаем div, и 8 кнопок к нему:
Code
<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>
Посмотреть пример
Как видите здесь эффект скрытия и отображения элемента достигается не просто путем изменения css параметра display, также изменяются значения ширины, высоты и прозрачности элемента, и что самое приятное все это происходит плавно. Если что-то пошло не так, то качаем пример к уроку показать или скрыть блок плавно.
Пароль к архиву - softfaw.ru
