Функция jQuery fadeIn(): изменение прозрачности элемента. Как сделать плавную прозрачность веб — элемента с помощью JQuery Полная прозрачность и скрытие элемента
В данном уроке я хочу представить «на ваш суд» эффект прозрачности картинки и текста. Эффект, мне кажется, неплохой и достоин рассмотрения. Служит он, конечно же, как и многие другие эффекты, для привлечения несколько большего внимания посетителей вашего сайта к той или иной части текста или к какому-либо изображению.
Для реализации такого эффекта на вашем сайте необходимо:
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 в определённое вами место:
Здесь прописать путь к картинке, отступы, размеры и название. Всё!
|
Демо-пример:
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.
Анимация на современных веб-страницах давно стала чем-то само собой разумеющимся. Растворяющиеся элементы, вылетающие сообщения, скользящие галереи изображений улучшают пользовательский опыт и увеличивают показатели сайта. В популярной 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 , а перед его появлением это правило отменяется.
Анимация на современных веб-страницах давно стала чем-то само собой разумеющимся. Растворяющиеся элементы, вылетающие сообщения, скользящие галереи изображений улучшают пользовательский опыт и увеличивают показатели сайта. В популярной 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".
В следующем примере jQuery 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, а перед его появлением это правило отменяется.
