Примеры JQuery: методы и события. Часть 2

Продолжим обзор методов и событий библиотеки JS — JQuery.

В прошлой статье, которую вы можете прочитать по ссылке Примеры JQuery: методы и события — M.Blogger, мы рассмотрели методы и события: hide(), show(), click() и hover(). Сегодня мы перейдем к постепенному исчезновению и появлению, за это отвечают методы: fadeIn(), fadeOut(), fadeToggle(), fadeTo().

Методы fadeIn() и fadeOut()

Метод fadeIn() используется для появления элементов, когда изначально на элементах стоит display: none. Другими словами, метод производит плавную анимацию, постепенно меняя прозрачность выбранного элемента и переводя его в видимое состояние.

Рассмотрим пример применения fadeIn():

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn(2000);
  });
});
</script>
</head>

<body>
 <button>Нажми меня</button>
 <br><br>
 <div id="div1" style="width:80px;height:80px;display:none;background-color:blue;"></div>
  <br>
 <div id="div2" style="width:80px;height:80px;display:none;background-color:red;"></div>
</body>
</html>

Если вы уже посмотрели реализацию примера, то можно увидеть, что квадраты плавно появляются друг за другом при нажатии кнопки. Анимационный эффект уже с коробки заложен в этот метод.

А теперь рассмотрим пример использования методы fadeOut(), он является противоположностью fadeIn(). Этот метод создает плавный эффект исчезновения выбранного элемента. Стандартный эффект анимации также заложен изначально.

Пример метода fadeOut():

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut(2000);
  });
});
</script>
</head>

<body>
 <button>Нажми меня</button>
 <br><br>
 <div id="div1" style="width:80px;height:80px;background-color:blue;"></div>
  <br>
 <div id="div2" style="width:80px;height:80px;background-color:red;"></div>
</body>
</html>

Как мы видим из примера, квадраты плавно исчезают друг за другом. Обратите внимание на стили div1 и div2, я убрал display: none, чтоб наши квадраты были изначально видимы.

Методы fadeToggle() и fadeTo()

Метод fadeToggle() выполняет две функции сразу, которые заложены в методы fadeIn() и fadeOut(). К примеру при нажатие на кнопку вы сможете спрятать элементы и показать их обратно. Когда метод fadeToggle() вызывается на видимом элементе, то при достижении уровня прозрачности равному нулю (opacity: 0) к элементу добавляется свойства display: none, благодаря которому элемент не будет отображаться.

Пример использования метода fadeToggle():

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
  });
});
</script>
</head>
<body>
 <p>Метод JQuery fadeToggle()</p>
 <button>Кликните на кнопку (показать/скрыть)</button>
 <br><br>
 <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
 <br>
 <div id="div2" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

Метод fadeTo() изменяет уровень прозрачности у выбранных элементов.

Этот метод позволяет контролировать необходимый уровень прозрачности элементов с помощью некоторых параметров:

  1. easing — определяет кривую скорости для анимации. Имеет только два значения — linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации с медленный стартом и медленным окончанием, скорость увеличивается в середине анимации). Значение по умолчанию swing.
  2. opacity — значение от 0 до 1, обозначающее прозрачность элемента. 1 — элемент непрозрачный; 0.5 — средняя прозрачность; 0 — полностью прозрачный элемент.

Пример метода fateTo():

<!DOCTYPE html>
<html>
<head>	
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$( document ).ready(function(){
 $("button").click(function(){ 
  $("#x").fadeTo( 1000, 0.3, "linear" );
 });
}); 
</script>
</head>
<body>
 <button>Метод .fadeTo()</button>
 <br><br>
 <div id="x" style="width:80px;height:80px;background-color:red;"></div>
</body>
</html>

Мы рассмотрели сегодня четыре метода JQuery: fadeIn(), fadeOut(), fadeToggle(), fadeTo(). Думаю статья была вам полезна и всё было понятно. Ожидайте следующего обзора методов JQuery.

Спасибо за внимание!