.fadeTo( duration, opacity [, complete ] )Возвращает: jQuery
Описание: Изменяет непрозрачность выбранных элементов.
-
версия добавлена: 1.0.fadeTo( duration, opacity [, complete ] )
-
версия добавлена: 1.4.3.fadeTo( duration, opacity [, easing ] [, complete ] )
Метод .fadeTo() анимирует непрозрачность выбранных элементов. Он похож на метод .fadeIn(), но этот метод делает элемент видимым и всегда меняет непрозрачность до 100%.
Продолжительность задаётся в миллисекундах; большие значения указывают на более медленные анимации, а не более быстрые. Можно использовать строки 'fast' и 'slow', чтобы указать продолжительность 200 и 600 миллисекунд соответственно. Если указана любая другая строка, используется значение по умолчанию 400 миллисекунд. В отличие от других методов эффектов, .fadeTo() требует явного указания duration.
Если указан обратный вызов, он вызывается по завершении анимации. Это может быть полезно для последовательного выполнения различных анимаций. Обратный вызов не получает никаких аргументов, но this устанавливается в элемент DOM, который анимируется. Если анимируется несколько элементов, важно отметить, что обратный вызов выполняется один раз для каждого сопоставленного элемента, а не один раз для всей анимации.
Мы можем анимировать любой элемент, например, простое изображение:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
// With the element initially shown, we can dim it slowly:
$( "#clickme" ).on( "click", function() {
$( "#book" ).fadeTo( "slow" , 0.5, function() {
// Animation complete.
});
}); 
fadeTo()С duration установленным на 0, этот метод просто изменяет свойство CSS opacity, поэтому .fadeTo( 0, opacity ) такое же, как и .css( "opacity", opacity ).
Дополнительные примечания:
- Все эффекты jQuery, включая
.fadeTo(), могут быть отключены глобально, установивjQuery.fx.off = true, что фактически устанавливает продолжительность в 0. Более подробную информацию см. в jQuery.fx.off.
Примеры:
Анимирует первый абзац, установив непрозрачность 0,33 (33%, примерно одна треть видимой части), завершая анимацию в течение 600 миллисекунд.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeTo demo</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>
Click this paragraph to see it fade.
</p>
<p>
Compare to this one that won't fade.
</p>
<script>
$( "p" ).first().on( "click", function() {
$( this ).fadeTo( "slow", 0.33 );
} );
</script>
</body>
</html> Демо:
Затуманивает div до случайной непрозрачности при каждом щелчке, завершая анимацию в течение 200 миллисекунд.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeTo demo</title>
<style>
p {
width: 80px;
margin: 0;
padding: 5px;
}
div {
width: 40px;
height: 40px;
position: absolute;
}
#one {
top: 0;
left: 0;
background: #f00;
}
#two {
top: 20px;
left: 20px;
background: #0f0;
}
#three {
top: 40px;
left:40px;
background:#00f;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>And this is the library that John built...</p>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script>
$( "div" ).on( "click", function() {
$( this ).fadeTo( "fast", Math.random() );
});
</script>
</body>
</html> Демо:
Найдите правильный ответ! Затуманивание займет 250 миллисекунд и изменит различные стили по завершении.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeTo demo</title>
<style>
div, p {
width: 80px;
height: 40px;
top: 0;
margin: 0;
position: absolute;
padding-top: 8px;
}
p {
background: #fcc;
text-align: center;
}
div {
background: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>Wrong</p>
<div></div>
<p>Wrong</p>
<div></div>
<p>Right!</p>
<div></div>
<script>
var getPos = function( n ) {
return (Math.floor( n ) * 90) + "px";
};
$( "p" ).each(function( n ) {
var r = Math.floor( Math.random() * 3 );
var tmp = $( this ).text();
$( this ).text( $( "p" ).eq( r ).text() );
$( "p" ).eq( r ).text( tmp );
$( this ).css( "left", getPos( n ) );
} );
$( "div" )
.each(function( n ) {
$( this ).css( "left", getPos( n ) );
} )
.css( "cursor", "pointer" )
.on( "click", function() {
$( this ).fadeTo( 250, 0.25, function() {
$( this )
.css( "cursor", "" )
.prev()
.css( {
"font-weight": "bolder",
"font-style": "italic"
} );
} );
} );
</script>
</body>
</html> 
