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

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



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

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

Немного теории
У всех объектов которые окружают нас в повседневной жизни есть характеристика прозрачности, которая отвечает за то, насколько объект пропускает световой поток. Например обычное стекло имеет коэффициент прозрачности 10% – то есть пропускает 90% света проходящего через него. Чем выше коэффициент прозрачности тем меньше света пропускает объект и следственно тем лучше виден. Монитор конечно хоть и не может менять свою прозрачность, но принцип действия тотже – эффект появления или исчезновение объекта будет достигаться путем изменение css свойства прозрачности объекта. Для этих целей в jquery есть набор методов fade:

fadeIn(speed,[fn]) – сделает объект видимым (плавно проявит) за время speed, и после этого вызовет функцию [fn] один раз.

fadeOut(speed,[fn]) – сделает объект прозрачным (плавно скроет) за время speed, и после этого вызовет функцию [fn] один раз.

fadeTo(speed, opacity,[fn]) – изменит уровень прозрачности объекта до значение opacity за время speed, и после этого вызовет функцию [fn] один.

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

[fn] – не обязательный параметр

Практический пример
Создадим четыре кнопки – скрыть, отобразить, 10% прозрачность, 100% прозрачность и будем экспериментировать с картинкой:

Code
<input type="button" value="Скрыть" onclick="$('div.container').fadeOut('slow');">
<input type="button" value="Отобразить" onclick="$('div.container').fadeIn('slow');">
<input type="button" Value="10% прозрачность" onclick="$('div.container').fadeTo('slow',0.1);">
<input type="button" Value="100% прозрачность" onclick="$('div.container').fadeTo('slow',1);">
<div class="container">
<img src="http://savepic.org/1151719.jpg">
</div>

Обратите внимание, что если вы сначала кликнули на “10% прозрачность”, затем на “скрыть” и затем на “отобразить”, то после щелчка на “отобразить” прозрачность вернется к отметке 10%, а не 100% – дело в том, что функции fadeIn и fadeOut компенсируют только изменения сделанные друг другом, не забывайте это.

Данный метод можно применять к любым объектам, в том числе и к тексту. Как видите плавное появление можно довольно просто, быстро и красиво реализовать через javascript и не нужен нам никакой flash. Если что-то не получилось качаем скрипт плавного появления или смотрим пример плавного появления на jquery.

Пароль к архиву - softfaw.ru

Прикрепления: fading.rar(81Kb)




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