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