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. 在Blade中结合gperftools检查内存泄露

    Blade是我们开发的大规模C++项目构建工具. gperftools是google开发的性能工具,由高效内存分配器,CPU性能分析器,堆分析器,堆检查器等工具组成. 和其他构建工具不同,结合gtes ...

  2. 美洽SDK

    简介 GitHub地址:https://github.com/Meiqia/MeiqiaSDK-Android 开发文档:http://meiqia.com/docs/meiqia-android-s ...

  3. call和apply区别

    call和apply 基本上是一个意思 区别在于call的第二个参数可以是任意的类型,而apply的第二个参数必须是数组,也可以是arguments.call方法:语法:call(thisObj,Ob ...

  4. CSS3 target 伪类不得不说那些事儿（纯CSS实现tab切换）

    是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...

  5. Asp.Net WebAPI 中Cookie 获取操作方式

    1. /// <summary> /// 获取上下文中的cookie /// </summary> /// <returns></returns> [H ...

  6. Lesson 7: Responsive Typography In Action

    Lesson 7: Responsive Typography In Action 排版一直都是设计和传达的基础.虽然现在的设计和印刷品设计差别很大,但核心原则还是不变的. Article 1: Bo ...

  7. #define 和 typedef场合

    #define定义“可读”的常量以及一些宏语句的任务,而typedef则常用来定义关键字.冗长的类型的别名.

  8. Undefined symbols for architecture x86_64:

    真机运行正常, 但要在模拟器运行的时候, 编译就报错了: 解决方法: 1.将Build Settings的Architectures修改为arm7 armv7s.Xcode7默认是加上arm64的,但 ...

  9. [转]C++智能指针的创建

    zero 坐在餐桌前,机械的重复“夹菜 -> 咀嚼 -> 吞咽”的动作序列,脸上用无形的大字写着:我心不在焉.在他的对面坐着 Solmyr ,慢条斯理的吃着他那份午餐,维持着他一贯很有修养 ...

  10. uva 12207 - That is Your Queue

    #include <cstdio> #include <iostream> #include <deque> using namespace std; int ma ...