Продолжая тему про jquery сегодня расскажу как сделать на javascript плавное появление картинки. Да, да именно плавное, не как-то рвано и ступенчато, а именно плавно, ну и конечно при помощи всего нескольких строк кода – на то он и javascript фреймфорк jquery.

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

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

 
<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="plavnoe-poyavlenie-i-zatemnenie-kartinka.jpg">
</div>

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

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