jQuery 入门教程(7): 滑动效果


		jQuery支持使用下面方法来实现HTML元素的滑动效果：
 
slideDown()
slideUp()
slideToggle()
slideDown方法
用来实现向下滑动动画效果，其基本语法为：
 
$(selector).slideDown(speed,callback);
 
可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个可选参数为回调函数，在slideDown()方法结束后调用。
 
下面例子点击按钮#panel 将采用下滑方式显示出来：
 
 
[html] 
<!DOCTYPE html>  
<html>  
<meta charset="utf-8">  
<title>JQuery Demo</title>  
<script src="scripts/jquery-1.9.1.js"></script>  
<script>  
    $(document).ready(function () {  
        $("#flip").click(function () {  
            $("#panel").slideDown("slow");  
        });  
    });  
</script>  
  
<style type="text/css">  
    #panel, #flip  
    {  
        padding: 5px;  
        text-align: center;  
        background-color: #e5eecc;  
        border: solid 1px #c3c3c3;  
    }  
  
    #panel  
    {  
        padding: 50px;  
        display: none;  
    }  
</style>  
</head>  
<body>  
  
    <div id="flip">Click to slide down panel</div>  
    <div id="panel">Hello world!</div>  
  
</body>  
</html>  
 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
    $(document).ready(function () {
        $("#flip").click(function () {
            $("#panel").slideDown("slow");
        });
    });
</script>
 
<style type="text/css">
    #panel, #flip
    {
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
    }
 
    #panel
    {
        padding: 50px;
        display: none;
    }
</style>
</head>
<body>
 
    <div id="flip">Click to slide down panel</div>
    <div id="panel">Hello world!</div>
 
</body>
</html>
 
 
 
slideUp方法
用来实现向上滑动动画效果，其基本语法为：
 
$(selector).slideUp(speed,callback);
 
可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个可选参数为回调函数，在slideUp()方法结束后调用。
 
 
[javascript]  
$("#flip").click(function(){  
  $("#panel").slideUp();  
});  
 
$("#flip").click(function(){
  $("#panel").slideUp();
});
 
 
 
slideToggle方法
用来实现交替显示向上向下滑动动画效果，如果之前是下滑显示，slideToggle则显示slideUp(),反之显示slideDown
其基本语法为：
 
$(selector).slideToggle(speed,callback);
 
可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个可选参数为回调函数，在slideUp()方法结束后调用。
 
[javascript]  
$("#flip").click(function(){  
  $("#panel").slideToggle();  
});  
 
$("#flip").click(function(){
  $("#panel").slideToggle();
});

补充：web前端 , JavaScript ,