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. mount, findmnt,df命令

    ■    The  mount  command gives an overview of all mounted devices. To get this information, the /pro ...

  2. Linux 机器之间建立互信

    原理: 就是两台机器(web-1和web-2)经过预先设置好经过认证的key文件,双方互相访问时,进行自动认证,从而实现互信.   互信的原理了解了,我们可以把配置ssh互信的步骤进行有效的分割. 1 ...

  3. 数据库的事务处理必须满足ACID原则，ACID分别是指什么

    http://blog.csdn.net/dingxingmei/article/details/39270375

  4. JavaScript 客户端JavaScript之 脚本化浏览器窗口

    1.计时器 客户端Javascript以全局函数setTimeOut().clearTimeOut().setInterval().clearInterval()提供这一功能.   前者是从运行的那一 ...

  5. Dapper事务操作

    1.报错信息: 如果分配给命令的连接位于本地挂起事务中,ExecuteNonQuery 要求命令拥有事务.命令的 Transaction 属性尚未初始化. 出现这种原因是在执行Execute语句时,没 ...

  6. thinkphp M 和模板用法

    <?phpnamespace Home\Controller;use Think\Controller;class IndexController extends Controller { pu ...

  7. You don't have permission to access /phpmyadmin/main.php on this server.

    wamp  安装后,打开首页.出现问题,信息如下: “You don't have permission to access /phpmyadmin/main.php on this server.” ...

  8. 开发H5小游戏

    Egret白鹭H5小游戏开发入门(一)   前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...

  9. UIImagePickerController 操作图库

     UIImagePickerController详解   转载自:http://blog.csdn.net/kingsley_cxz/article/details/9157093 1.UIImage ...

  10. C++ 单向链表反转

    单向链表反转,一道常见的面试题,动手实现下. #include "stdafx.h" #include <stdlib.h> struct Node{ int data ...