jQuery 滑动方法有三种：slideDown()、slideUp()、slideToggle()。

　　jQuery slideDown() 方法用于向下滑动元素，

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

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

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

　　例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>jQuery slideDown() 方法</title>

     <style>

         #div1{margin:0 auto;

             width:300px;

             height:30px;

             background:orange;

             text-align: center;

             line-height:30px;

             cursor:pointer;

         }

         #div2{margin:0 auto;

             width:300px;

             height:200px;

             background:#BCEA5F;

             text-align: center;

             line-height:200px;

             display: none;

         }

     </style>

     <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->

     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>

       <script type="text/javascript">

            $(document).ready(function(){

              $("#div1").click(function(){

                  $("#div2").slideDown(1000);

              });

            });

       </script>

 </head>

 <body>

      <div id="div1">点我下滑</div>

      <div id="div2">这是内容</div>

 </body>

 </html>

　　jQuery slideUp() 方法用于向上滑动元素。

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

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

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

　　例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>jQuery slideUp() 方法</title>

     <style>

         #div1{margin:0 auto;

             width:300px;

             height:30px;

             background:orange;

             text-align: center;

             line-height:30px;

             cursor:pointer;

         }

         #div2{margin:0 auto;

             width:300px;

             height:200px;

             background:#BCEA5F;

             text-align: center;

             line-height:200px;

         }

     </style>

     <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->

     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>

       <script type="text/javascript">

            $(document).ready(function(){

              $("#div1").click(function(){

                  $("#div2").slideUp(1000);

              });

            });

       </script>

 </head>

 <body>

      <div id="div1">点我隐藏内容</div>

      <div id="div2">我是内容</div>

 </body>

 </html>

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

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

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

　　$(selector).slideToggle(speed,callback);

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

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

　　例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>jQuery slideToggle() 切换</title>

     <style>

         #div1{

             margin:0 auto;

             width:300px;

             height:30px;

             background:orange;

             text-align: center;

             line-height:30px;

             cursor:pointer;

         }

         #div2{

             margin:0 auto;

             width:300px;

             height:200px;

             background:#BCEA5F;

             text-align: center;

             line-height:200px;

         }

     </style>

     <!-- jquery自己引入就好，我这里的是jquery-1.12.0.min.js -->

     <script type="text/javascript" src="jquery-1.12.0.min.js"></script>

       <script type="text/javascript">

            $(document).ready(function(){

              $("#div1").click(function(){

                  $("#div2").slideToggle(1000);

              });

            });

       </script>

 </head>

 <body>

      <div id="div1">点我显示效果内容/隐藏内容</div>

      <div id="div2">我是内容</div>

 </body>

 </html>

jQuery效果之滑动的更多相关文章

  1. JQuery效果-淡入淡出、滑动、动画

    一.JQuery Fading方法 JQuery 有四种fade方法 1.fadeIn() 淡入                       对应也有$(selector).fadeIn(speed, ...

  2. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  3. jQuery 效果 —— 滑动

    jQuery 效果 -- 滑动 1.向下滑动元素 (1)使用slideDown()方法可以用于向下滑动元素 $("button").click(function(){ $(&quo ...

  4. JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  5. jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

    jQuery 效果- 隐藏和显示:hide() 和 show() 规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒 您可以使用 toggl ...

  6. jQuery 效果 - 滑动

    jQuery 滑动方法可使元素上下滑动. 点击这里,隐藏/显示面板 实例 jQuery slideDown()演示 jQuery slideDown() 方法. jQuery slideUp()演示 ...

  7. jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画

    jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...

  8. jQuery 效果 – 滑动

    jQuery 滑动方法可使元素上下滑动. 点击这里,隐藏/显示面板 一寸光阴一寸金,因此,我们为您提供快捷易懂的学习内容. 在这里,您可以通过一种易懂的便利的模式获得您需要的任何知识. 实例 jQue ...

  9. 松软科技课堂:jQuery 效果 - 滑动

    jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() jQuery sli ...

随机推荐

  1. flutter 图片组件

    加入图片的几种方式 Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径. Image.network:网络资源图片,意思就是你需要加入一 ...

  2. 对有序特征进行离散化（继承Spark的机器学习Estimator类）

    采用信息增益或基尼指数寻找最优离散化点 package org.apache.spark.ml.feature import org.apache.spark.sql.SparkSession imp ...

  3. 查看Oracle中是否有锁表

    转: 查看Oracle中是否有锁表 2018-04-23 17:59 alapha 阅读(19450) 评论(0) 编辑 收藏 一.用dba用户登录,或者将用户赋权为DBA用户 命令: su - or ...

  4. Python3入门（十三）——常用内置模块之时间日期模块datatime

    1.日期时间模块——datatime //其他模块例如time.calender等模块暂不展开 (1)获取当前时间:datatime.now(): from datetime import datet ...

  5. ES6深入浅出-13 Proxy 与 Reflect-2.Proxy 代理

    阮一峰http://es6.ruanyifeng.com/#docs/proxy MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ...

  6. 判断本网段有多少可用的ip地址

    为了提高效率,使用多线程方式同时ping. 但是如果开启255个线程,又会因为网络端口太拥挤,会被判定为无法ping通.所以本例使用java自带线程池,线程池的连接数还不能太大,启动了15个线程. 等 ...

  7. 细聊Oracle通过ODBC数据源连接SQL Server数据库

    类似文章搜索引擎上有很多,内容大致相同,今天所谓细聊是因为我在借鉴这些文章时候走了些弯路,所以写此文,为自己备忘,同时如果能为初涉此处知识点的小伙伴提供些帮助就更好了,文章结尾处的一些扩展有一定实战意 ...

  8. [转]jkeyll的安装步骤

    链接地址:https://nxjniexiao.github.io/2018/08/17/jkeyll-install/

  9. html的输出&，空格，大小于号

    最近定做安装程序,因为这次定做名字里有&符号,用微软的txt文本打开配置文件,在配置文件里修改了名称,名称在文本里显示正常,但是定做出来后,发现&符号变成了_下划线,在本来的& ...

  10. centos下通过yum安装redis-cli

    redis在第三方的源里,首先添加源,最常用的是epel源 yum install epel-release 然后就可以安装redis了 yum install -y redis 安装完成以后配置文件 ...