jQuery метод .fadeIn()

jQuery эффекты

Определение и применение

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


Обращаю Ваше внимание, что для того, чтобы перевести элемент из видимого состояния в скрытое, изменяя при этом прозрачность элемента, вы можете воспользоваться jQuery методом .fadeOut().


jQuery синтаксис:

Синтаксис 1.0:
$( selector ).fadeIn() // метод используется без параметров

$( selector ).fadeIn( duration, complete ) 

duration - Number, или String
complete - Function

$( selector ).fadeIn( { options } ) // option: value (описание ниже)

options - PlainObject

Синтаксис 1.4.3:
$( selector ).fadeIn( duration, easing, complete ) 

duration - Number, или String
easing - String
complete - Function

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.4)

Значения параметров

ПараметрОписание
durationСтроковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова 'fast' и 'slow' соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю).
easingКлючевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция - кубическая кривая Безье). Без использования внешних плагинов имеет только два значения - linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing.
completeФункция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация.
options
  • duration (по умолчанию: 400).
    Тип: Number, или String.
    Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться (смотри выше).
  • easing (по умолчанию: swing).
    Тип: String.
    Ключевое слово (строка), которое определяет кривую скорости для анимации (смотри выше).
  • queue (по умолчанию: true).
    Тип: Boolean, или String.
    Логическое значение, которое указывает следует ли размещать анимацию в очереди эффектов. Если указано false, то анимация начнется сразу же. С версии jQuery 1.7 опция queue также может принимать строку, в этом случае анимация будет добавлена к очереди, представленной этой строкой. Когда используется пользовательское имя очереди анимации, то она не запускается автоматически, вы должны при этом использовать метод .dequeue( "имя очереди" ), чтобы запустить её.
  • specialEasing.
    Тип: PlainObject.
    Объект, содержащий одно или несколько свойств CSS, определенных параметром свойства и соответствующие им функции замедления. Добавлено в версии 1.4.
  • step.
    Тип: Function( Number now, Tween tween ).
    Функция вызывается для каждого анимируемого свойства каждого анимированного элемента. Эта функция дает возможность изменять Tween Object, чтобы изменить значение свойства, прежде чем оно будет установлено.
  • progress.
    Тип: Function.
    Функция, которая будет вызываться после каждого шага анимации, только один раз для каждого анимированного элемента, независимо от количества анимированных свойств. Добавлено в версии 1.8.
  • complete.
    Тип: Function.
    Функция (callback), которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента (смотри выше).
  • start.
    Тип: Function (Promise Object animation).
    Функция, вызывается, когда анимация элемента начинается. Добавлено в версии 1.8.
  • done.
    Тип: Function (Promise Object animation, Boolean jumpedToEnd).
    Функция вызывается, когда анимация элемента завершается. Добавлено в версии 1.8.
  • fail.
    Тип: Function (Promise Object animation, Boolean jumpedToEnd).
    Функция вызывается, когда анимацию элемента не удается завершить. Добавлено в версии 1.8.
  • always.
    Тип: Function (Promise Object animation, Boolean jumpedToEnd).
    Функция вызывается, когда анимация элемента завершается или останавливается незавершенной. Добавлено в версии 1.8.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery методов .fadeOut() и .fadeIn() (без параметров)</title>
		<style></style>		
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".out" ).click(function(){ // задаем функцию при нажатиии на элемент с классом out
	    $( "div" ).fadeOut(); // плавно изменяя прозрачность скрываем все элементы <div>
	  });
	  $( ".in" ).click(function(){ // задаем функцию при нажатиии на элемент с классом in
	    $( "div" ).fadeIn(); // плавно изменяя прозрачность отображаем все элементы <div>
	  });
	});
		</script>
	</head>
	<body>
		<button class = "out">Метод .fadeOut()</button>
		<button class = "in">Метод .fadeIn()</button>
		<hr>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery метода .fadeIn() мы при нажатии на определенную кнопку, плавно изменяя прозрачность отображаем все элементы <div> в документе, а с использованием метода .fadeOut() плавно изменяя прозрачность скрываем все элементы <div> в документе.

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

Пример использования jQuery методов .fadeOut() и .fadeIn() (без параметров).
Пример использования jQuery методов .fadeOut() и .fadeIn() (без параметров)

Рассмотрим следующий пример в котором зададим методам .fadeIn() и .fadeOut() различные значения продолжительности анимации:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery методов .fadeOut() и .fadeIn() (различная скорость анимации)</title>
		<style></style>			
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".out" ).click(function(){ // задаем функцию при нажатиии на элемент с классом out
	    $( "div:first" ).fadeOut( "slow" ); // плавно изменяя прозрачность скрывааем первый элемент <div> в документе
	    $( "div:nth-of-type(2)" ).fadeOut( 1000 ); // плавно изменяя прозрачность скрывааем второй элемент <div> в документе
	    $( "div:last" ).fadeOut( "fast" ); // плавно изменяя прозрачность скрывааем последний элемент <div> в документе
	  });
	  $( ".in" ).click(function(){ // задаем функцию при нажатиии на элемент с классом in
	    $( "div:first" ).fadeIn( "slow" ); // плавно изменяя прозрачность отображаем первый элемент <div> в документе
	    $( "div:nth-of-type(2)" ).fadeIn( 1000 ); // плавно изменяя прозрачность отображаем второй элемент <div> в документе
	    $( "div:last" ).fadeIn( "fast" ); // плавно изменяя прозрачность отображаем последний элемент <div> в документе
	  });
	});
		</script>
	</head>
	<body>
		<button class = "out">Метод .fadeOut()</button>
		<button class = "in">Метод .fadeIn()</button>
		<hr>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

В этом примере с использованием jQuery методов .fadeIn() и .fadeOut() мы при нажатии на определенную кнопку плавно изменяя прозрачность скрываем, либо отображаем все элементы <div> в документе. При этом первый элемент <div> скрывается, или отображается за 600 миллисекунд (ключевое слово 'slow'), второй элемент за 1000 миллисекунд, а третитй за 200 миллисекунд (ключевое слово 'fast').

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

Пример использования jQuery методов .fadeOut() и .fadeIn() (различная скорость анимации).
Пример использования jQuery методов .fadeOut() и .fadeIn() (различная скорость анимации).

Рассмотрим следующий пример в котором зададим методам .fadeIn() и .fadeOut() не только продолжительность анимации, но и укажем скорость анимации и функцию, которая будет выполнена после завершения анимации:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery методов .fadeOut() и .fadeIn() (с callback функцией)</title>
		<style></style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".out" ).click(function(){ // задаем функцию при нажатиии на элемент с классом out
	    $( "div" ).fadeOut( 500, "linear", function(){ // плавно изменяя прозрачность скрывааем элементы <div> в документе
	      $(".status").text("Элементы исчезли"); // добавляем текстовую информации в элемент с классом status
	    });
	  });
	  $( ".in" ).click(function(){ // задаем функцию при нажатиии на элемент с классом in
	    $( "div" ).fadeIn( 500, "linear", function(){ // плавно изменяя прозрачность отображаем элементы <div> в документе
	      $(".status").text("Элементы появились"); // добавляем текстовую информации в элемент с классом status
	    });
	  });
	});
		</script>
	</head>
	<body>
		<button class = "out">Метод .fadeOut()</button>
		<button class = "in">Метод .fadeIn()</button>
		<hr>
		<div></div>
		<div></div>
		<div></div>
		<p class = "status"></p>
	</body>
</html>

В этом примере с использованием jQuery методов .fadeIn() и .fadeOut() мы при нажатии на определенную кнопку плавно изменяя прозрачность скрываем, либо отображаем все элементы <div> в документе. При этом мы указали для наших методов продолжительность анимации равную пол секунды (500 миллисекунд), эффект анимации происходит с одинаковой скоростью от начала до конца (linear) и функцию, которая после завершения анимации находит элемент с классом status и добавляет текстовую информацию (jQuery метод .text()).

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

Пример использования jQuery методов .fadeOut() и .fadeIn() (с callback функцией).
Пример использования jQuery методов .fadeOut() и .fadeIn() (с callback функцией).

Рассмотрим следующий пример в котором передадим в качестве параметра методов .fadeIn() и .fadeOut() объект, содержащий различные опции, которые будут контролировать анимацию:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery методов .fadeOut() и .fadeIn() (объект с опциями в качестве параметра)</title>
		<style></style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".out" ).click(function(){ // задаем функцию при нажатиии на элемент с классом out
	    $( "div" ).fadeOut( { // плавно изменяя прозрачность скрывааем элементы <div> в документе
	      duration: 800, // продолжительность анимации
	      easing: "linear", // скорость анимации
	      complete: function(){ // callback
	        $(".status").text("Элементы исчезли"); // добавляем текстовую информации в элемент с классом status
	      },
	      queue: false // не ставим в очередь
	    });
	  });
	  $( ".in" ).click(function(){ // задаем функцию при нажатиии на элемент с классом in
	    $( "div" ).fadeIn( { // плавно изменяя прозрачность отображаем элементы <div> в документе
	      duration: 800, // продолжительность анимации
	      easing: "linear", // скорость анимации
	      complete: function(){ // callback
	        $(".status").text("Элементы появились"); // добавляем текстовую информации в элемент с классом status
	      },
	      queue: false // не ставим в очередь
	    });
	  });
	});
		</script>
	</head>
	<body>
		<button class = "out">Метод .fadeOut()</button>
		<button class = "in">Метод .fadeIn()</button>
		<hr>
		<div></div>
		<div></div>
		<div></div>
		<p class = "status"></p>
	</body>
</html>

В этом примере с использованием jQuery методов .fadeIn() и .fadeOut() мы при нажатии на определенную кнопку плавно изменяя прозрачность скрываем, либо отображаем все элементы <div> в документе. При этом мы в качестве параметров методов передаем объект содержащий следующие параметры:

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

Пример использования jQuery методов .fadeOut() и .fadeIn() (объект с опциями в качестве параметра).
Пример использования jQuery методов .fadeOut() и .fadeIn() (объект с опциями в качестве параметра).
jQuery эффекты