jQuery控制的不同方向的滑动(向左、向右滑动等)
引入jquery.js，复制以下代码，即可运行。
<styletype="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代码
<divid="slidebottom"class="slide"> <button> slideit </button> <divclass="inner"> Slidefrombottom </div> </div>
Js代码
$('#slidebottombutton').click(function(){
$(this).next().slideToggle();
});
2、左侧横向交替滑动AnimateLeft
Html代码
<divid="slidewidth"class="slide"> <button> slideit </button> <divclass="inner"> Slidefrombottom </div> </div>
Js代码
$("#slidewidthbutton").click(function(){
$(this).next().animate({width:'toggle'});
});
3、左侧横向交替滑动AnimateLeftMargin（非隐藏）
Html代码
<divid="slideleft"class="slide"style="width:50%;float:right"> <button> slideit </button> <divclass="inner"> Slidefrombottom </div> </div>
Js代码
$("#slideleftbutton").click(function(){
var$lefty=$(this).next();
$lefty.animate({
left:parseInt($lefty.css('left'),10)==0?-$lefty.outerWidth():0
});
});
4、右侧横向滑动Slidetoright
Html代码
<divid="slidemarginleft"class="slide"style="width:60%;float:left"> <button> slideit </button> <divclass="inner"> Slidefrombottom </div> </div>
Js代码
$("#slidemarginleftbutton").click(function(){
var$marginlefty=$(this).next();
$marginlefty.animate({
marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0?$marginlefty.outerWidth():0
});
});