Как сделать плавную прозрачность веб — элемента с помощью JQuery. Как сделать плавную прозрачность веб — элемента с помощью JQuery Jquery плавное изменение прозрачности
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 элемент к которому применяется анимация, что позволяет нам поочередно добавить каждому элементу в виде текстового содержимого значение переменной, увеличенное на один.
Результат нашего примера.
И снова приветствую Вас дорогие читатели блога . Сегодня я хочу рассказать Вам как сделать плавную прозрачность любого элемента на сайте с помощью 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); — возвращение элемента к самой первой прозрачности, после того как курсор убран с элемента.
После того как мы настроили скрип как нам нужно, его можно применять к элементам веб — дизайна с помощью класса, например.
В этом уроке мы рассмотрим пример изменения прозрачности 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 . Получится своего рода очень интересные действия с изображением!
Последнее обновление: 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()
