Анимация на современных веб-страницах давно стала чем-то само собой разумеющимся. Растворяющиеся элементы, вылетающие сообщения, скользящие галереи изображений улучшают пользовательский опыт и увеличивают показатели сайта. В популярной javascript-библиотеке jQuery fadeIn() - одна из базовых анимационных функций. Она управляет прозрачностью блоков.

Fade-эффекты

Метод fadeIn() обеспечивает изменение прозрачности переданного ему элемента до значения 100%. В библиотеке jQuery он идет в паре с функцией fadeOut(), с помощью которой можно обнулить прозрачность и тем самым "растворить" элемент.

Подобного эффекта можно добиться с помощью метода fadeTo(), диапазон влияния которого еще шире. FadeTo() может установить любое значение прозрачности в диапазоне от 0 до 1.

Синтаксис метода

Метод fadeIn() в jQuery вызывается в контексте элемента, прозрачность которого необходимо изменить. Может принимать от нуля до трех параметров:

Element.fadeIn(); element.fadeIn(duration); element.fadeIn(duration, callback); element.fadeIn(duration, easing, callback); element.fadeIn(config);

Аргумент duration определяет время, в течение которого будет осуществлена анимация. Это может быть цифра, означающая количество миллисекунд, или одно из ключевых слов:

  • "fast" (200ms);
  • "slow" (600ms);

Если значение duration не установлено, оно по умолчанию будет равно 400 миллисекунд.

Параметр callback обозначает функцию, которая будет вызвана сразу после завершения анимации. Никаких параметров callback-функция не принимает. Переменная this внутри нее ссылается на изменяемый DOM-узел.

Аргумент easing управляет временной функцией анимации, то есть ее скоростью в зависимости от времени. С его помощью можно ускорить начало и замедлить конец анимации или сделать ее равномерной на всем протяжении. Значением аргумента является строка, содержащая ключевое слово, по умолчанию это функция "swing" .

В следующем fadeIn() будет равномерно увеличивать прозрачность элемента с классом.block в течение одной секунды, после чего выведет сообщение в консоли:

$(".block").fadeIn(1000, linear, function() { console.log("Анимация завершена"); });

Если перечисленных параметров недостаточно, методу можно передать объект config , который может содержать до 11 различных настроек.

Функции обратного вызова

Параметр callback, передаваемый в метод jQuery fadeIn(), - очень полезная опция, так как изменение свойства осуществляется асинхронно, не блокируя общий поток выполнения кода.

Const callback = function() { console.log("Анимация завершена"); }; $(".element").fadeIn(1000); callback();

В этом примере функция запустится сразу после начала анимации, не дожидаясь полного появления элемента.

Чтобы все сработало как задумано, следует использовать аргумент callback , позволяющий отловить конец анимации:

Const callback = function() { console.log("Анимация завершена"); }; $(".element").fadeIn(1000, callback);

Теперь сообщение в консоль будет выведено только тогда, когда элемент станет полностью видим.

Полная прозрачность и скрытие элемента

Как известно, нулевое значение свойства opacity не убирает элемент со страницы, а лишь делает его невидимым. Такое поведение не годится, если мы хотим спрятать какой-то блок.

Поэтому fade-методы библиотеки jQuery: fadeIn(), fadeTo() и fadeOut() работают с прозрачностью в комбинации со свойством display . Полностью прозрачный элемент скрывается с помощью правила display: none , а перед его появлением это правило отменяется.

jQuery эффекты Определение и применение

jQuery метод .fadeTo() позволяет изменить уровень прозрачности у выбранных элементов.

Метод .fadeTo() похож на метод .fadeIn() , но в отличие от него позволяет контролировать необходимый уровень прозрачности элементов.

jQuery синтаксис: Синтаксис 1.0: $(selector ).fadeTo(duration , opacity , complete ) duration - Number , или String opacity - Number (0 - 1) complete - Function Синтаксис 1.4.3: $(selector ).fadeTo(duration , opacity , easing , complete ) duration - Number , или String opacity - Number (0 - 1) easing - String complete - Function Добавлен в версии jQuery 1.0 (синтаксис обновлен в версии 1.4.3) Значения параметров Параметр Описание
duration Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова "fast" и "slow" соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю).
opacity Числовое значение между 0 и 1 , обозначающее прозрачность для элемента (1 - элемент непрозрачный, 0.5 - среднее значение, 0 - элемент полностью прозрачный).
easing Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция - кубическая кривая Безье). Без использования внешних плагинов имеет только два значения - linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing .
complete Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация.
Пример использования Пример использования jQuery метода.fadeTo()

div { display : inline-block ; width : 75px ; /* ширина элемента */ height : 150px ; /* высота элемента */ margin-right : 20px ; /* внешний отступ справа */ background-color : green ; /* цвет заднего фона */ }

$("div ").fadeTo(1000 , 0.5 , "linear "); // линейно изменяем прозрачность элементов до 0,5 за одну секунду } ); } ); Метод.fadeTo()

.fadeTo() до 0,5 за одну секунду (1000 миллисекунд). Обратите внимание, что скрытый элемент отображается, этого можно избежать используя свойство visibility со значением hidden , либо применяя селекторы не затрагивающие необходимые элементы.

Результат нашего примера:

Рассмотрим следующий пример в котором зададим методу fadeTo() callback функцию:

Пример использования jQuery метода.fadeTo() (с callback функцией)

div { display : inline-block ; /* блочно-строчные элементы (выстраиваем элементы в линейку) */ width : 75px ; /* ширина элемента */ height : 150px ; /* высота элемента */ margin-right : 20px ; /* внешний отступ справа */ background-color : red ; /* цвет заднего фона */ }

$(document ).ready(function (){ $(".fadeto ").click(function (){ // задаем функцию при нажатиии на элемент с классом toggle var num = 0; // переменная (для вставки номера элемента) $("div ").fadeTo(500 , 0.4 , "linear ", function (){ // линейно изменяем прозрачность элементов до 0,4 за пол секунды и вызываем функцию num++ ; // увеличиваем переменную на 1 (инкремент) $(this ).text(num ); // добавляем значение переменной элементу к которому применяется анимация } ); } ); } ); Метод.fadeTo()

В этом примере с использованием jQuery метода .fadeTo() мы при нажатии на кнопку линейно изменяем прозрачность элементов до 0,4 за пол секунды (500 миллисекунд). Кроме того, по завершению анимации, мы вызываем функцию, которая добавляет каждому элементу значение переменной. Обратите внимание, что внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация, что позволяет нам поочередно добавить каждому элементу в виде текстового содержимого значение переменной, увеличенное на один.

Результат нашего примера.

В данном уроке я хочу представить «на ваш суд» эффект прозрачности картинки и текста. Эффект, мне кажется, неплохой и достоин рассмотрения. Служит он, конечно же, как и многие другие эффекты, для привлечения несколько большего внимания посетителей вашего сайта к той или иной части текста или к какому-либо изображению.

Для реализации такого эффекта на вашем сайте необходимо:

2. Распаковать архив в текущую папку на компьютере. В папке transparency Вы увидите:

  • папку images с изображением;
  • папку js с jQuery;
  • файл demo1.html ;
  • файл demo2.html .

3. В используемом вами браузере поочередно откройте файлы demo1.html и demo2.html , проверьте работу скрипта.

4. Содержимое папок images и js закачайте в одноименные папки своего сайта. Эти папки находятся в корневой папке сайта. Если таковых у Вас не оказалось, их нужно создать.

Прозрачность картинки на jQuery
Демо-пример:
Вставка кода на страницу сайта

Участок кода подключения jQuery
()
и скрипт из файла demo1.html , который представлен в таблице внизу вставляем в head . Можно вставить и в body всю ниже представленную конструкцию целиком, так как скрипты можно располагать в разных вариантах. К примеру у Вас сайт на PHP и нет особого желания загромождать файл HEADER одноразовыми скриптами.

Если у Вас уже подключена библиотека jQuery последней или более поздней версии (на день публикации статьи - версия 3.1.1) или Вы используете удаленное подключение последней версии с сайта jQuery или Google API, разумеется, вторично подключать её не стоит.

$(document).ready(function(){ $(".limp").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); }); }); });

Путь к файлу библиотеки jQuery;

В данной строке limp - название класса для создания прозрачности;

В этой строке задаётся начальная прозрачность элемента;

В данной строке задаётся прозрачность элемента при наведении курсора;

В этой строке задаётся прозрачность при уходе курсора с элемента.


А код изображения вставляем в body в определённое вами место:

images/изображение.jpg " class="limp" vspace="XX " hspace="XX " width="XXX " height="XXX " alt="Название ">

Здесь прописать путь к картинке, отступы, размеры и название. Всё!


Прозрачность текста на jQuery
Демо-пример:

My Site is a personal site that gives you a central location to manage and store your documents, content, links, and contacts. My Site serves as a point of contact for other users in your organization to find information about you and your skills and interests. Content providers can use My Site as a method of customizing the information they present to users.
Вставка кода на страницу сайта:

Здесь все действия аналогичны первому варианту. Только лишь, вместо кода картинки вставляем код с текстом (в таблице внизу) - в нужное место раздела body :

My Site is a personal site.

Здесь пишите ваш текст.

Спасибо за внимание. Комментируйте статью. Всего Вам доброго. До скорой встречи! С уважением, Л.М.

Последнее обновление: 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.

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

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

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

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