jQuery控制的不同方向的滑动（横向滑动等）

引入jquery.js，复制以下代码，即可运行。

1. <style type="text/css">
2. .slide {
3. position: relative;
4. height: 200;
5. lightyellow;
6. }
7. .slide .inner {
8. position: absolute;
9. left: 0;
10. bottom: 0;
11. height: 100;
12. lightblue;
13. width: 100%
14. }
15. </style>

1、slidetoggle() 交替slidedown(),slideup()

1. <div id="slidebottom" class="slide">
2. <button>
3. slide it
4. </button>
5. <div class="inner">
6. Slide from bottom
7. </div>
8. </div>

1. $('#slidebottom button').click(function() {
2. $(this).next().slideToggle();
3. });

2、左侧横向交替滑动 Animate Left

1. <div id="slidewidth" class="slide">
2. <button>
3. slide it
4. </button>
5. <div class="inner">
6. Slide from bottom
7. </div>
8. </div>

1. $("#slidewidth button").click(function(){
2. $(this).next().animate({width: 'toggle'});
3. });

3、左侧横向交替滑动 Animate Left Margin （非隐藏）

1. <div id="slideleft" class="slide" style="width: 50%;float: right">
2. <button>
3. slide it
4. </button>
5. <div class="inner">
6. Slide from bottom
7. </div>
8. </div>

1. $("#slideleft button").click(function(){
2. var $lefty = $(this).next();
3. $lefty.animate({
4. left:parseInt($lefty.css('left'),10)==0 ? -$lefty.outerWidth() : 0
5. });
6. });

4、右侧横向滑动Slide to right

1. <div id="slidemarginleft" class="slide" style="width: 60%;float: left">
2. <button>
3. slide it
4. </button>
5. <div class="inner">
6. Slide from bottom
7. </div>
8. </div>

1. $("#slidemarginleft button").click(function(){
2. var $marginlefty = $(this).next();
3. $marginlefty.animate({
4. marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0
5. });
6. });