# Метод fadeTo

Метод `fadeTo` плавно меняет прозрачность элемента до заданного значения, в диапазоне от `0` до `1`.

## Синтаксис

Длительность и прозрачность задаются при любом варианте использования метода. Изменение прозрачности за заданное время, `400мс` по умолчанию:

`.fadeTo(длительность, значение прозрачности);`

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

`.fadeTo('slow' или 'fast', значение прозрачности);`

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

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

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

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

## Пример

В следующем примере, при помощи метода `fadeTo` при нажатии на кнопку `#hide` элемент с `#test` будет скрываться путем уменьшения прозрачности до `0.5`, а на `#show` - показываться:

`<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').fadeTo(1000, 1); }); $('#hide').on('click', function() { $('#test').fadeTo(1000, 0.5); });`

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

- метод `fadeToggle`,
  который меняет прозрачность элементов
- метод `fadeIn`,
  который плавно показывает скрытые элементы, делая их непрозрачными
- метод `animate`,
  который анимирует свойства элементов

← →
↑