index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

    <script src="jquery-3.1.0.min.js"></script>

    <script src="myjs3.js"></script>

    <style>

       #content,#flipshow,#fliphide,#fliptoggle{

          padding:5px;

          text-align:center;

          background-color: #ece023;

          border:solid 1px #ece999;

       }

       #content{

          padding:50px;

          display:none;

       }

    </style>

 </head>

 <body>

     <div id="flipshow">出现</div><!-- 点击滑动出现 -->

     <div id="fliphide">隐藏</div><!-- 点击滑动隐藏 -->

     <div id="fliptoggle">隐藏/出现</div><!-- 点击滑动隐藏/出现 -->

     <div id="content">Hello world</div>

 </body>

 </html>

js代码：

 $(document).ready(function(){

     $("#flipshow").click(function(){//点击滑动出现

         $("#content").slideDown();

     });

     $("#fliphide").click(function(){//点击滑动隐藏

         $("#content").slideUp();

     });

     $("#fliptoggle").click(function(){//点击滑动隐藏/出现

         $("#content").slideToggle();

     });

 });

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

  1. jQuery 效果 —— 滑动

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

  2. jQuery 效果 - 滑动

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

  3. jQuery 效果 – 滑动

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

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

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

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

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

  6. Jquery效果代码--（二）

    //jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...

  7. jQuery -- 光阴似箭（二）：jQuery效果的使用

    jQuery -- 知识点回顾篇(二):jQuery效果的使用 1. jQuery 效果 -- 隐藏和显示:  使用 hide() 和 show() 方法来隐藏和显示 HTML 元素. <!DO ...

  8. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

随机推荐

  1. jQuery源代码 解析一 工具方法

    1. 外层沙箱以及命名空间$ 几乎稍微有点经验前端人员都这么做,为了避免声明了一些全局变量而污染,把代码放在一个"沙箱执行",然后在暴露出命名空间(可以为API,函数,对象): 2 ...

  2. 在top命令下kill和renice进程

    For common process management tasks, top is so great because it gives an overview of the most active ...

  3. sql 删除多项

    delete from 表名 where 字段 in(值,值,值.......)

  4. 粘帖屏幕截图到web页面插件 screenshot-paste

    在很多场合下,我们可能有这样的需求:提供个屏幕截图上传到系统,作为一个凭证.传统的操作方式是:屏幕截图,保存文件到本地,在web页面上选择本地文件并上传,这里至少需要三步.有没有可能直接将截图粘帖到w ...

  5. Thinkphp 上传图片

    <?php // 本类由系统自动生成,仅供测试用途 class ListAction extends Action { public function index(){ //$name = 's ...

  6. Examples_08_04

  7. 武汉科技大学ACM：1004: Lake and Island

    Problem Description 北园孩子的专属福利来啦~学校从北区宿舍到湖心岛修建了一条通道让北园的同学们可以上去一(kuang)同(xiu)玩(en)耍(ai),这一天,IcY向ahm001 ...

  8. 10.使用final关键字修饰一个变量时...

    10.使用final关键字修饰一个变量时,是引用不能变,还是引用的对象不能变? 答:引用不能变,不能将引用再次指向另一个新的对象,但引用所指向的对象中的内容是可以改变的. 补充: 1.对于基本类型,f ...

  9. nuc950支持nand的mtd驱动的kernel修改

    支持nand的mtd驱动的kernel修改 一.更新nanddriver文件 将新的nanddriver文件nuc900_nand.c放到kernel的drivers/mtd/nand目录下 二.修改 ...

  10. redis配置文件redis.conf详细说明

    # By default Redis does not run as a daemon. Use 'yes' if you need it.# Note that Redis will write a ...