Главная > Советы Windows 7

Установка заданной прозрачности у элемента. Изменение прозрачности 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 элемент к которому применяется анимация.
Пример использования Пример использования 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 элемент к которому применяется анимация, что позволяет нам поочередно добавить каждому элементу в виде текстового содержимого значение переменной, увеличенное на один.

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

В этом уроке мы рассмотрим пример изменения прозрачности 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 . Что значит для любого элемента? А значит это то, что данную прозрачность Вы сможете применить к любым картинкам, счётчикам, а также тегам на сайте. Всё это просто украсит Ваш ресурс. В общем давайте будем начинать.

Напомню, что скриптом с нами поделился 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); — возвращение элемента к самой первой прозрачности, после того как курсор убран с элемента.

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

Анимация на современных веб-страницах давно стала чем-то само собой разумеющимся. Растворяющиеся элементы, вылетающие сообщения, скользящие галереи изображений улучшают пользовательский опыт и увеличивают показатели сайта. В популярной 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, а перед его появлением это правило отменяется.

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

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

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

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

Рекомендуем также

Loading...Loading...