Изменяет уровень прозрачности у выбранных элементов на странице. Позволяет менять прозрачность плавно. Метод имеет два варианта использования:

duration — продолжительность изменения прозрачности. Может быть задана в миллисекундах или строковым значением "fast" или "slow" (200 и 600 миллисекунд).
opacity — значение требуемой прозрачности. Должно быть задано числом от 0 до 1 (0 - полная прозрачность, 1 - отсутствие прозрачности).
callback — функция, заданная в качестве обработчика завершения изменения прозрачности. Ей не передается никаких параметров, однако, внутри функции, переменная this будет содержать DOM-объект элемента, у которого изменяют прозрачность. Если таких элементов несколько, то обработчик будет вызван отдельно, для каждого элемента.

duration — описание смотри выше. По умолчанию, параметр равен 400
opacity — см. выше.
easing — динамика изменения прозрачности (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание)
callback — см. выше.

• изменить прозрачность
• установить прозрачность элементу
• установить уровень прозрачности элементу
• прозрачность элемента
• .fadeTo()
• fadeTo()

Последнее обновление: 1.11.2015

Эффекты прозрачности позволяют нам, плавно изменяя прозрачность элемента, скрыть его или отобразить. Эффекты прозрачности реализованы с помощью методов fadeOut() , fadeIn() , fadeTo() и fadeToggle() .

Методы fadeOut() , fadeIn() и fadeToggle() имеют похожие формы использования:

fadeOut/fadeIn/fadeToggle() : метод без параметров

fadeOut/fadeIn/fadeToggle( [, easing][, complete]) . Параметр duration указывает как долго изменение прозрачности элемента будет длиться. По умолчанию его значение равно 400 миллисекунд.

Параметр easing , который принимает название функции плавности анимации в виде строки. По умолчанию его значение равно "swing". Также можно использовать значения "slow" и "fast" , которые соответствуют длительности эффекта в 600 и 200 миллисекунд.

Параметр complete представляет функцию обратного вызова, вызываемую методом по завершении анимации

Метод fadeTo в отличие от других методов еще принимает и параметр opacity - оно принимает значение, до которого надо изменить прозрачность элемента: fadeTo(duration, opacity [, easing][, complete]) . В качестве значение opacity принимается значение от 0 (полностью прозрачный) до 1 (полностью видимый).

Допустим, пусть у нас на странице будет изображение и две кнопки, которые будут изменять прозрачность этого изображения:

Отобразить Cкрыть $(function() { $("#ars").fadeTo(2000,0.6); $("#fadeIn").click(function(){ $("#ars").fadeIn("slow", function(){alert("Отображено");}); }); $("#fadeOut").click(function(){ $("#ars").fadeOut(2000, function(){alert("Скрыто");}); }); });

Обратите внимание, что метод fadeIn увеличивает прозрачность до того значения, которое было до использования метода fadeOut, а не обязательно до 1. То есть в данном случае, поскольку в начале был применен метод fadeTo и прозрачность изменена до 0.6, то и метод fadeIn будет увеличивать прозрачность до 0.6.

И снова приветствую Вас дорогие читатели блога . Сегодня я хочу рассказать Вам как сделать плавную прозрачность любого элемента на сайте с помощью JQuery . Что значит для любого элемента? А значит это то, что данную прозрачность Вы сможете применить к любым картинкам, счётчикам, а также тегам на сайте. Всё это просто украсит Ваш ресурс. В общем давайте будем начинать.

Напомню, что скриптом с нами поделился megaweb.su, за что ему огромное спасибо.

Скрипт

Самое первое, что нужно сделать — это подключить библиотеку jQuery , в смысле, скрипт, которые ниже нужно поставить между тегами и .

Затем, туда же перед тегом нужно скопировать и вставить следующий jQuery скрипт :

; $(document).ready(function(){ $(".megaweb").each(function(){ $(this).animate({opacity:"0.3"},1); $(this).mouseover(function(){ $(this).stop().animate({opacity:"1.0"},600); }); $(this).mouseout(function(){ $(this).stop().animate({opacity:"0.3"},300); }); }); });

Скопировали? Поздравляю большую часть работы Вы уже сделали:-)

Настройка скрипта

Данный скрипт Вы полностью можете настроить под свой вкус.

• $(‘.megaweb’) — это название класса, который будет применяться к веб элементам;
• animate({opacity:’0.3′},1); — это самая оптимальная прозрачность элемента;
• animate({opacity:’1.0′},600); — прозрачность веб — элемента при наведении;
• animate({opacity:’0.3′},300); — возвращение элемента к самой первой прозрачности, после того как курсор убран с элемента.

После того как мы настроили скрип как нам нужно, его можно применять к элементам веб — дизайна с помощью класса, например.