Добро пожаловать!
На развлекательный портал SoftFAW.Ru!

Добавьте нас в закладки, мы будем Вам очень признательны! Для этого нажмите комбинацию клавиш Ctrl+D.
Добро пожаловать!



Страница 1 из 11
Форум » Все о uCoz » Статьи » Показать или скрыть блок плавно
Показать или скрыть блок плавно
AdminДата: Четверг, 06.01.2011, 13:46 | Сообщение # 1

Сообщений: 63
Подарки: 7
[ 36 ]
Статус: Офлайн
Немного теории.

Объекты можно легко и просто скрывать меняя всего один 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

Прикрепления: howHide.rar(126Kb)




 
Форум » Все о uCoz » Статьи » Показать или скрыть блок плавно
Страница 1 из 11
Поиск: