Vertical animation
slideDown(speed,callback)
By height change (increasing downward) to dynamically display all matching elements, optionally triggering a callback function after the display is complete.
This animation effect only adjusts the height of the element, allowing the matching elements to be displayed in a "sliding" manner.
speed here (String|Number): (optional) A string of one of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value representing the animation duration ( Such as: 1000)
slideUp(speed, callback)
Dynamicly hide all matching elements by changing the height (decreasing upward) , optionally triggering a callback function after hiding is complete.
This animation effect only adjusts the height of the element and can hide the matching elements in a "sliding" manner.
The usage is the same as slideDown.. But the effect is the opposite.
slideToggle(speed,callback)
Toggles the visibility of all matching elements via a height change, and optionally triggers a callback function when the toggle is complete.
This animation effect only adjusts the height of the element, allowing the matching element to be hidden or displayed in a "sliding" manner.
<!DOCTYPE html>
<html>
<head>
<title>php.cn</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
function f1(){
//隐藏 hidden
$('div').slideUp(3000);
}
function f2(){
//显示 show
$('div').slideDown(3000);
}
function f3(){
$('div').slideToggle(2000);
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
</head>
<body>
<div></div>
<input type="button" value="隐藏" onclick="f1()" />
<input type="button" value="显示" onclick="f2()" />
<input type="button" value="开关" onclick="f3()" />
</body>
</html>