jQuery_效果(滑动)

浏览数：16 / 时间：2015年06月09日

jQuery 滑动方法

jQuery 拥有以下滑动方法：slideDown()、slideUp()、slideToggle()

1、jQuery slideDown() 方法（用于向下滑动元素）

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(".filp").click(function(){
            $(".panel").slideDown("fast");
          });
    });
</script>
<style type="text/css">
    body,div,p{ padding:0; margin:0 auto;}
    div.panel,p.filp{ text-align:center; background:red; height:100px; padding-top:20px;}
    div.panel{ height:120px; display:none;}
    p.filp{ height:30px;}
</style>
</head>
<body>
    <div class="panel">
        <p>W3School - 领先的 Web 技术教程站点</p>
        <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
    </div>
    <p class="filp">请点击这里</p>
</body>

2、jQuery slideUp() 方法（用于向上滑动元素）

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(".filp").click(function(){
            $(".panel").slideUp("fast");
          });
    });
</script>
<style type="text/css">
    body,div,p{ padding:0; margin:0 auto;}
    div.panel,p.filp{ text-align:center; background:red; height:100px; padding-top:20px;}
    div.panel{ height:120px;}
    p.filp{ height:30px;}
</style>
</head>
<body>
    <div class="panel">
        <p>W3School - 领先的 Web 技术教程站点</p>
        <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
    </div>
    <p class="filp">请点击这里</p>
</body>

3、jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(".filp").click(function(){
            $(".panel").slideToggle("fast");
          });
    });
</script>
<style type="text/css">
    body,div,p{ padding:0; margin:0 auto;}
    div.panel,p.filp{ text-align:center; background:red; height:100px; padding-top:20px;}
    div.panel{ height:120px; display:none;}
    p.filp{ height:30px;}
</style>
</head>
<body>
    <div class="panel">
        <p>W3School - 领先的 Web 技术教程站点</p>
        <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
    </div>
    <p class="filp">请点击这里</p>
</body>