jQuery эффекты - вхождение и вывод

С помощью jQuery можно реализовать эффекты плавного вхождения и вывода элементов.

Демонстрация эффектов

Нажмите здесь, чтобы скрыть/показать панель

Время — деньги, поэтому мы предоставляем вам быстрое и понятное обучение.

Здесь вы можете легко получить любую информацию, которую вам нужно.

Пример

jQuery fadeIn()
Демонстрация метода jQuery fadeIn()
jQuery fadeOut()
Демонстрация метода jQuery fadeOut()
jQuery fadeToggle()
Демонстрация метода jQuery fadeToggle()
jQuery fadeTo()
Демонстрация метода jQuery fadeTo()

Методы затухания jQuery

С помощью jQuery можно реализовать эффекты плавного вхождения и вывода элементов.

jQuery имеет следующие четыре метода fade:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() метод

jQuery fadeIn() используется для введения скрытых элементов.

Грамматика:

$(selector.fadeIn(,,callback);

Опциональный , Параметр определяет продолжительность эффекта. Он может принимать следующие значения: "slow", "fast" или миллисекунды.

Опциональный callback Параметр - это имя функции, которая выполняется после завершения фейдинга.

Ниже приведен пример использования метода fadeIn() с различными параметрами:

Пример

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
);

попробуйте сами

jQuery fadeOut() метод

jQuery fadeOut() метод используется для выведения видимых элементов.

Грамматика:

$(selector.fadeOut(,,callback);

Опциональный , Параметр определяет продолжительность эффекта. Он может принимать следующие значения: "slow", "fast" или миллисекунды.

Опциональный callback Параметр - это имя функции, которая выполняется после завершения фейдинга.

Ниже приведен пример с различными параметрами метода fadeOut():

Пример

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
);

попробуйте сами

Метод fadeToggle() jQuery

Метод fadeToggle() jQuery позволяет переключаться между методами fadeIn() и fadeOut().

Если элемент уже выходит, то fadeToggle() добавляет эффект проецирования.

Если элемент уже проецируется, то fadeToggle() добавляет эффект выхода.

Грамматика:

$(selector).fadeToggle(,,callback);

Опциональный , Параметр определяет продолжительность эффекта. Он может принимать следующие значения: "slow", "fast" или миллисекунды.

Опциональный callback Параметр - это имя функции, которая выполняется после завершения фейдинга.

Ниже приведен пример с различными параметрами метода fadeToggle():

Пример

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
);

попробуйте сами

Метод fadeTo() jQuery

Метод fadeTo() jQuery позволяет плавно изменять непрозрачность (значение介于 0 и 1).

Грамматика:

$(selector).fadeTo(,,opacity,callback);

Обязательный параметр speed определяет продолжительность эффекта. Он может принимать следующие значения: "slow", "fast" или миллисекунды.

Обязательный параметр opacity в методе fadeTo() устанавливает эффект проникновения/выхода на заданную непрозрачность (значение介于 0 и 1).

Опциональный параметр callback - это имя функции, которая выполняется после завершения выполнения функции.

Ниже приведен пример с различными параметрами метода fadeTo():

Пример

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
);

попробуйте сами

Руководство по эффектам jQuery

Для полного просмотра эффектов jQuery, пожалуйста, посетите наш Руководство по эффектам jQuery。