www.jQueryBook.ru - jQuery документация

 

 

 

 



  • Категории: Effects › Fading

    .fadeOut()

    Скрывает видимые элементы набора jQuery, делает их невидимыми, плавно уменьшая уровень их непрозрачности (эффект растворения).

Синтаксис и описание:

  • Добавлено в jQuery 1.0.fadeOut( [ duration ] [, complete ] )

  • Добавлено в jQuery 1.0.fadeOut( options )

  • Добавлено в jQuery 1.4.3.fadeOut( duration [, easing ] [, complete ] )

  • Команда .fadeOut(), парная к .fadeIn(), плавно уменьшает непрозрачность элементов набора jQuery до 0. Как только непрозрачность достигает нуля, jQuery устанавливает элементу display: none — он перестаёт занимать место в layout, как и после .hide().

Возвращаемое значение: (объект) Набор jQuery.

Параметры:

  • duration – (число | строка) Продолжительность в миллисекундах либо "fast" (200 мс) / "slow" (600 мс). По умолчанию — 400 мс.

  • easing – (строка, с jQuery 1.4.3) swing (по умолчанию) или linear.

  • complete – (функция) Вызывается по одному разу на каждый элемент после того, как он полностью скрыт.

  • options – (объект) Хэш параметров эффекта — как у .fadeIn() и .animate().

  1. Примечание:

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

  2. Примечание:

    После .fadeOut() элемент получает display: none и попадает под селектор :hidden — так же, как после .hide(). Анимированное значение opacity по завершении jQuery возвращает к исходному, так что последующий .show() сразу покажет элемент полностью непрозрачным.

  3. В jQuery 3.x и 4.0:

    Метод не деприкейчен. Как и у .fadeIn(), в slim-сборке jQuery эффектов нет (с 3.0), а с 4.0 в slim дополнительно недоступны deferred/queue — для .fadeOut() в любом виде нужна полная сборка.

Примеры:

  1. Скрыть уведомление плавно и удалить его из DOM после завершения.

    $('#toast').fadeOut(400, function() {
      $(this).remove();
    });
  2. Не запускать повторно, пока идёт анимация (через :animated).

    $('#panel').on('click', '.js-close', function() {
      var $panel = $('#panel');
      if (!$panel.is(':animated')) {
        $panel.fadeOut(300);
      }
    });

[ наверх ]









 




Справочник по jQuery JavaScript API на русском языке