АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
110 of 119 menu
НОВИНКА: Практика на Реальных Проектах и Работы в Портфолио. Бесплатный курс! Жми для записи!

Метод fadeOut

Метод fadeOut плавно скрывает элементы. Показать элементы можно с помощью метода fadeIn, сделав их непрозрачными.

Синтаксис

Показ за заданное время, 400мс по умолчанию:

.fadeOut(длительность);

Время можно задавать не только в миллисекундах, но и ключевыми словами slow (600мс) и fast (200мс), чем больше значение, тем медленней анимация:

.fadeOut('slow' или 'fast');

Если не указывать параметры - анимации не будет, элементы будут скрываться мгновенно:

.fadeOut();

Можно также вторым параметром передать функцию плавности, а также третьим callback-функцию - сработает после выполнения анимации. Оба параметра необязательны:

.fadeOut(длительность, [функция плавности], [callback-функция]);

Можно передать методу различные опции, в виде объекта JavaScript, содержащего пары ключ: значение:

.fadeOut(options);

Такой объект может передавать следующие параметры и функции - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. Описание этих параметров вы можете посмотреть для метода animate. Например, установим длительность и функцию плавности:

.fadeOut( {duration: 800, easing: easeInSine} );

Пример

В следующем примере при нажатии на кнопку #hide элемент с #test будет скрываться с помощью метода fadeOut, а на кнопку #show - показываться, с помощью fadeIn. Также мы установим скорость на 1000мс:

<button id="hide">hide</button> <button id="show">show</button> <div id="test"></div> #test { width: 200px; height: 200px; background: green; color: white; margin-top: 10px; } $('#show').on('click', function() { $('#test').fadeIn(1000); }); $('#hide').on('click', function() { $('#test').fadeOut(1000); });

Пример

А в следующем примере после окончания анимации при показе элемента #test мы выведем алерт с текстом '!', а при скрытии с текстом '?':

<button id="hide">hide</button> <button id="show">show</button> <div id="test"></div> #test { width: 200px; height: 200px; background: green; color: white; margin-top: 10px; } $('#show').on('click', function() { $('#test').fadeIn(1000, function() { alert('!'); }); }); $('#hide').on('click', function() { $('#test').fadeOut(1000, function() { alert('?'); }); });

Смотрите также

  • метод fadeIn,
    который плавно показывает скрытые элементы, делая их непрозрачными
  • метод hide,
    который плавно скрывает элементы
  • метод slideUp,
    который плавно скрывает элементы
enru