Метод 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,
который анимирует свойства элементов