fadeIn():通过将它们淡入淡出来显示匹配的元素。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeIn demo</title>
<style>
p {
position: relative;
width: 400px;
height: 90px;
}
div {
position: absolute;
width: 400px;
height: 65px;
font-size: 36px;
text-align: center;
color: yellow;
background: red;
padding-top: 25px;
top: 0;
left: 0;
display: none;
}
span {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
Let it be known that the party of the first part
and the party of the second part are henceforth
and hereto directed to assess the allegations
for factual correctness... (<a href="#">click!</a>)
<div><span>CENSORED!</span></div>
</p>
<script>
$( "a" ).click(function() {
$( "div" ).fadeIn( 3000, function() {
$( "span" ).fadeIn( 100 );
});
return false;
});
</script>
</body>
</html>
fadeOut:通过将它们淡化为透明来隐藏匹配的元素。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
.box,
button {
float: left;
margin: 5px 10px 5px 0;
}
.box {
height: 80px;
width: 80px;
background: #090;
}
#log {
clear: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btn1">fade out</button>
<button id="btn2">show</button>
<div id="log"></div>
<div id="box1" class="box">linear</div>
<div id="box2" class="box">swing</div>
<script>
$( "#btn1" ).click(function() {
function complete() {
$( "<div>" ).text( this.id ).appendTo( "#log" );
}
$( "#box1" ).fadeOut( 1600, "linear", complete );
$( "#box2" ).fadeOut( 1600, complete );
});
$( "#btn2" ).click(function() {
$( "div" ).show();
$( "#log" ).empty();
});
</script>
</body>
</html>
fadeTo:调整匹配元素的不透明度。
<!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>
fadeToggle:通过动画化不透明度来显示或隐藏匹配的元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeToggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</p>
<div id="log"></div>
<script>
$( "button:first" ).click(function() {
$( "p:first" ).fadeToggle( "slow", "linear" );
});
$( "button:last" ).click(function() {
$( "p:last" ).fadeToggle( "fast", function() {
$( "#log" ).append( "<div>finished</div>" );
});
});
</script>
</body>
</html>