slideDown:用滑动运动显示匹配的元素
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
div {
background: #cfd;
margin: 3px;
width: 50px;
text-align: center;
float: left;
cursor: pointer;
border: 2px outset black;
font-weight: bolder;
}
input {
display: none;
width: 120px;
float: left;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>Push!</div>
<input type="text">
<input type="text" class="middle">
<input type="text">
<script>
$( "div" ).click(function() {
$( this ).css({
borderStyle: "inset",
cursor: "wait"
});
$( "input" ).slideDown( 1000, function() {
$( this )
.css( "border", "2px red inset" )
.filter( ".middle" )
.css( "background", "yellow" )
.focus();
$( "div" ).css( "visibility", "hidden" );
});
});
</script>
</body>
</html>
slideToggle:使用滑动运动显示或隐藏匹配的元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideToggle demo</title>
<style>
div {
background: #b977d1;
margin: 3px;
width: 60px;
height: 60px;
float: left;
}
div.still {
background: #345;
width: 5px;
}
div.hider {
display: none;
}
span {
color: red;
}
p {
clear: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div></div>
<div class="still"></div>
<div style="display:none;">
</div><div class="still"></div>
<div></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div></div>
<p><button id="aa">Toggle</button> There have been <span>0</span> toggled divs.</p>
<script>
$( "#aa" ).click(function() {
$( "div:not(.still)" ).slideToggle( "slow", function() {
var n = parseInt( $( "span" ).text(), 10 );
$( "span" ).text( n + 1 );
});
});
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideToggle demo</title>
<style>
p {
width: 400px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Toggle</button>
<p>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</p>
<script>
$( "button" ).click(function() {
$( "p" ).slideToggle( "slow" );
});
</script>
</body>
</html>
slideUp:用滑动运动隐藏匹配的元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideUp demo</title>
<style>
div {
margin: 2px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>
<button>Hide One</button>
<input type="text" value="One">
</div>
<div>
<button>Hide Two</button>
<input type="text" value="Two">
</div>
<div>
<button>Hide Three</button>
<input type="text" value="Three">
</div>
<div id="msg"></div>
<script>
$( "button" ).click(function() {
$( this ).parent().slideUp( "slow", function() {
$( "#msg" ).text( $( "button", this ).text() + " has completed." );
});
});
</script>
</body>
</html>