Метод 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);
});

Вижте също