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. Ubuntu安装分区设置

    我的Ubuntu 安装分区 /boot   200M /          2000M /home  6000M swap    1000M /boot分区,它包含了操作系统的内核和在启动系统过程中所 ...

  2. 关于HttpServlet和Servlet以及doPost和doGet关系

    这两天在看Servlet和Jsp,spring太难了,还是先看看基础,只怪自己太弱了. Servlet是一个接口,本身定义的是一种网络服务,HttpServlet是已经实现了Servlet接口,也就是 ...

  3. 富文本编辑器CKEDITOR的使用配置(问题注解)

    CKEDITOR是一款非常轻便的富文本编辑器,如上图:参考网上的使用方法,我以.net为例,在aspx页面使用, 准备工作:首先要下载控件包,将解压后的整个文件夹添加到项目根目录. 第一步:引用js, ...

  4. ajax分页实现，jquery.pagination.js

    1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代 ...

  5. 【※索引】mysql索引常用命令

    索引分单列索引和组合索引.单列索引,即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引.组合索引,即一个索包含多个列. MySQL索引类型包括: (1)普通索引 这是最基本的索引,它没 ...

  6. oracle遍历游标

    1,while循环 declare v_tname ); cursor c_tname is select a.TABLE_NAME from user_tables a where a.TABLES ...

  7. 修复 status 为 unusable 的 index

    以DBA权限登陆,执行以下脚本即可. declare     -- 指向所有 UNUSABLE 状态的 index 的游标      cursor c is        select index_n ...

  8. 微信公众平台开发（一） ——实现URL接入

    一.填写服务器配置 登录微信公众平台,点击开发者中心,点击“修改配置”按钮,填写服务器地址(URL).Token和EncodingAESKey.URL是开发者用来接收微信消息和事件的接口URL.Tok ...

  9. C#方法的使用

    static void Main(string[] arr) { , ); Console.WriteLine(max); Console.ReadKey(); } /// <summary&g ...

  10. 武汉科技大学ACM：1001: 谁不爱打牌

    Problem Description BobLee最近在复习考研,但是他也喜欢打牌(有谁不爱玩牌呢?).但是作为一名ACMER,斗地主显然满足不了他的兴趣,于是他和YYD一起YY出来了一个游戏规则, ...