.fadeTo()
返回: jQuery
.fadeTo( duration, opacity [, complete ] )
描述：调整匹配的元素的不透明度。
加入于: 1.0
.fadeTo( duration, opacity [, complete ] )加入于: 1.4.3
.fadeTo( duration, opacity [, easing ] [, complete ] ).fadeTo()方法变动了匹配的元素的不透明度。它近似于.fadeIn()方法，但是那个方法会取消隐藏元素，并总是淡入到100%不透明度。
持续时间用毫秒数指定；更大的数字表示更慢的动画，而不是更快的动画。字符串'fast'表示200毫秒的持续时间，'slow'表示800毫秒的持续时间。如果提供了别的字符串，就会使用duration的默认值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" ).click(function() {
$( "#book" ).fadeTo( "slow" , 0.5, function() {
// 动画完成。
});
});
把duration设置成0，该方法只是改变CSS属性opacity，所以.fadeTo( 0, opacity )与.css( "opacity", opacity )相同。
其它说明
- 所有的动画效果，包括
.fadeTo()可以全局性地关闭，只要设置jQuery.fx.off=true，它会有效地把duration设置为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-1.10.2.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" ).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-1.10.2.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" ).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-1.10.2.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" )
.click( function() {
$( this ).fadeTo( 250, 0.25, function() {
$( this )
.css( "cursor", "" )
.prev()
.css({
"font-weight": "bolder",
"font-style": "italic"
});
});
});
</script>
</body>
</html>
演示结果