Метод fadeTo

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

Синтаксис

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

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

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

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

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

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

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

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

Пример

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

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
  $('#test').fadeTo(1000, 0.5);
});

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