Функция 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.
Здесь пишите ваш текст.
Спасибо за внимание. Комментируйте статью. Всего Вам доброго. До скорой встречи! С уважением, Л.М.
И снова приветствую Вас дорогие читатели блога . Сегодня я хочу рассказать Вам как сделать плавную прозрачность любого элемента на сайте с помощью 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); — возвращение элемента к самой первой прозрачности, после того как курсор убран с элемента.
После того как мы настроили скрип как нам нужно, его можно применять к элементам веб — дизайна с помощью класса, например.
Последнее обновление: 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 . Подобная тематика уже обсуждалась в уроке , ну там принцип работы скрипта был основан на простом CSS и html , в данном уроке затронут еще и JQuery плюс ко всему, там была простая смена картинки при наведении, тут же выполняется прозрачность (opacity ).
Я думаю, что Вы уже посмотрели два демо и поняли разницу работы скриптов. Давайте теперь разберем код данного урока.
Первый шаг. HTML.
И так у нас имеется файл index.php .
В нем сначала мы подключаем библиотеку jquery.js. Скачайте её себе и подключите между тегами head .
Далее разберем JQyery код, который будет взаимодействовать с классом img . Для начала прописываем функцию, которая имеет класс img и задаем прозрачность 50% в изначальном положении. То есть изображение без наведения на него, имеет прозрачность на половину от его возможности. Затем, когда на изображение совершено действие наведения, вызывается функция, которая переключает положение класса img в положение снятия прозрачности. После завершения наведения на изображение, функция переключается в исходное изначальное положение. Атрибут прозрачности изображения opacity . Можете подробно изучить его в документации по CSS .
$(function() { // устанавливаем прозрачность изображения на 50% $(".img").css("opacity","0.5"); // выполняем наведение мыши на изображение $(".img").hover(function () { // после чего прозрачность исчезает $(this).stop().animate({ opacity: 1.0 }, "slow"); }, // после снятия наведения мыши на изображение function () { // прозрачность возвращается в исходное положение 50% $(this).stop().animate({ opacity: 0.5 }, "slow"); }); });
Второй шаг. Файл стилей CSS.
Прописываем тег div и задаем ему класс images в нем укажем немного стилей CSS для изображения (пожеланию, просто так лучше видно как работает данный скрипт). Теперь прописываем тег img в нем указываем путь к изображению и задаем класс img , который взаимодействует с JQuery кодом выше.
Немного стилей CSS для лучшей наглядности.
Images { border: 1px solid #363636; width: 300px; background-color: #2d2d2d; padding: 8px; }
Скрипт является простым своего рода, что делает его более актуальным в применении изменения прозрачности изображения при наведении. Советую Вам поиграться с JQyery кодом, где имеются три функции изначальное, при наведении и со снятия наведения. Можно будет проявить разнообразие. Допустим, в изначальном положении указать opacity 0.5 , при наведении opacity 1.0 , а со снятия наведения opacity 0.2 . Получится своего рода очень интересные действия с изображением!
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 элемент к которому применяется анимация. |
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 элемент к которому применяется анимация, что позволяет нам поочередно добавить каждому элементу в виде текстового содержимого значение переменной, увеличенное на один.
Результат нашего примера.
