引入jquery.js，復制以下代碼，即可運行。
<style type=
"text/css"
>
.slide {
position
:
relative
;
height
:
200
;
lightyellow;
}
.slide .inner {
position
:
absolute
;
left
:
0
;
bottom
:
0
;
height
:
100
;
lightblue;
width
:
100%
}
</style>
1、slidetoggle() 交替slidedown(),slideup()
Html代碼
<
div
id
=
"slidebottom"
class
=
"slide"
>
<
button
>
slide it
</
button
>
<
div
class
=
"inner"
>
Slide from bottom
</
div
>
</
div
>
Js代碼
$(
'#slidebottom button'
).click(
function
() {
$(
this
).next().slideToggle();
});
2、左側橫向交替滑動 Animate Left
Html代碼
<
div
id
=
"slidewidth"
class
=
"slide"
>
<
button
>
slide it
</
button
>
<
div
class
=
"inner"
>
Slide from bottom
</
div
>
</
div
>
Js代碼
$(
"#slidewidth button"
).click(
function
(){
$(
this
).next().animate({width:
'toggle'
});
});
3、左側橫向交替滑動 Animate Left Margin （非隱藏）
Html代碼
<
div
id
=
"slideleft"
class
=
"slide"
style
=
"width: 50%;float: right"
>
<
button
>
slide it
</
button
>
<
div
class
=
"inner"
>
Slide from bottom
</
div
>
</
div
>
Js代碼
$(
"#slideleft button"
).click(
function
(){
var
$lefty = $(
this
).next();
$lefty.animate({
left:parseInt($lefty.css(
'left'
),10)==0 ? -$lefty.outerWidth() : 0
});
});
4、右側橫向滑動Slide to right
Html代碼
<
div
id
=
"slidemarginleft"
class
=
"slide"
style
=
"width: 60%;float: left"
>
<
button
>
slide it
</
button
>
<
div
class
=
"inner"
>
Slide from bottom
</
div
>
</
div
>
Js代碼
$(
"#slidemarginleft button"
).click(
function
(){
var
$marginlefty = $(
this
).next();
$marginlefty.animate({
marginLeft:parseInt($marginlefty.css(
'marginLeft'
),10)==0 ? $marginlefty.outerWidth() : 0
});
});