滑动效果

在jQuery中，可以在元素上创建滑动效果。jQuery提供了三种fade方法 slideDown()向下滑动元素、slideUp()用于向上滑动元素、slideToggle()可以在 slideDown() 与 slideUp() 方法之间进行切换。

slideDown()语法：$(selector).slideDown(speed,callback);

slideUp()语法：$(selector).slideUp(speed,callback);

slideToggle()的语法：$(selector).slideToggle(speed,callback);

参数speed规定效果的时长，可以取值："slow"、"fast"或毫秒。callback参数是滑动完成后所执行的函数名称。

示例如下：

(1)描述

在示例中我们将把slide()的三种方法分别进行演示。

(2)代码实现

<script type="text/javascript">
$(function(){//slideDown()方法
    $("button").click(function(){
        $("#div1").slideDown("slow");
    });
})
$(function(){//slideUp()方法
    $("button").click(function(){
        $("#div2").slideUp("slow");
    });
})
$(function(){//slideToggle()方法
    $("button").click(function(){
        $("#div2").slideToggle("slow");
    });
})
</script>
...省略代码
<div id="div2" style="width:222px;height:83px;background-color:#e5eecc;margin:0px">
    吃香蕉不薄皮

    吃葡萄不吐皮
</div>
<button id="btn" style="width:222px;height:23px;background-color:#e5eecc;margin-bottom:0px">
    点击这里，看效果
</button>
<div id="div1" style="width:222px;height:83px;background-color:#e5eecc;display:none;margin:0px">
    有没有点小小激动呢

    想起那在夕阳下奔跑，那..那是我
    逝去的青春
</div>