fadeTo()

43
посл. ред. 28.10.2016

Метод fadeTo() изменяет прозрачность элементов текущей выборки.

Если элемент был скрыт средствами jQuery, тогда после отображения с помощью метода fadeTo() свойство display получит прежнее значение.

Варианты использования

jQ_object.fadeTo(duration, opacity[, easing][, complete]) => jQuery
Изменяет прозрачность (свойство opacity) элементов выборки до указанного значения от 0 до 1 (0 - полная прозрачность, 1 - полная видимость). Параметры duration, easing и complete задаются так же, как в остальных эффектах.

Примеры

<html>
<head>
  <title>Анимация в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button class="fadeTo80">80% видимости</button>
  <button class="fadeTo40">40% видимости</button>
  <button class="fadeTo0">0% видимости</button>
  <div style="width: 200px; height: 200px; background: coral; display: none"></div>
</body>
</html>
 
<script>
$('.fadeTo80').on('click', function() {
  $('div').fadeTo(1000, 0.8);
});
$('.fadeTo40').on('click', function() {
  $('div').fadeTo(1000, 0.4);
});
$('.fadeTo0').on('click', function() {
  $('div').fadeTo(1000, 0);
});
</script>