# Метод fadeIn

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

## Синтаксис

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

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

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

`.fadeIn('slow' или 'fast');`

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

`.fadeIn();`

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

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

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

`.fadeIn(options);`

Такой объект может передавать следующие параметры и функции - `duration`, `easing`, `queue`, `specialEasing`, `step`, `progress`, `complete`, `start`, `done`, `fail`, `always`. Описание этих параметров вы можете посмотреть для метода ⁅с href="/ru/javascript/lib/jquery/manual/animate/"⁆animate⁅/с⁆. Например, установим длительность и функцию плавности:

`.fadeIn( {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('?'); }); });`

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

- метод `fadeOut`,
  который плавно плавно скрывает элементы, делая их прозрачными
- метод `show`,
  который плавно показывает элементы
- метод `slideDown`,
  который плавно показывает элементы

←→
↑