Jquery плавное изменение прозрачности. Как сделать плавную прозрачность веб — элемента с помощью JQuery. Определение и применение

07.10.2021

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

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

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

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

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

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

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

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.

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

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

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

Fade-эффекты

Вам будет интересно:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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