Немного теории
У всех объектов которые окружают нас в повседневной жизни есть характеристика прозрачности, которая отвечает за то, насколько объект пропускает световой поток. Например обычное стекло имеет коэффициент прозрачности 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
