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. Scala学习笔记之：tuple、array、Map

    [TOC] 本文<快学Scala>的笔记 tuple学习笔记 tuple的定义 对偶是元组(tuple)的最简单形态--元组是不同类型的值的聚集. 元组的值是通过将单个值包含在圆括号中构成 ...

  2. Java基础知识强化26（1）：Object类之Object类的概述

    1.Object类 类Object是类层次结构的根类,每个类都使用 Object作为超类.所有对象(包括数组)都实现这个类的方法 每个类直接或者间接继承自Object类   2.Object类无参构造 ...

  3. Linux crontab命令

    --常用参数:crontab -l               //查看当前用户下的cron任务crontab -e               //编辑当前用户的定时任务crontab -u  jo ...

  4. C#判断网站运行状态是否正常

    我使用的是控制台应用程序来监控网站的运行状态,通过判断网站请求头(HEAD)来判断是否运行正常 下面列出几种常见的网站状态码 StatusCode 数字表示 OK 200. OK 指示请求成功,且请求 ...

  5. 第一章 初识Lucene

    多看几遍,慢就是快 1.1 应对信息爆炸 1.2 Lucene 是什么 1.2.1 Lucene 能做些什么 1.2.2 Lucene 的历史 1.3 Lucene 和搜索程序组件 基本概念 索引操作 ...

  6. asp.net微信开发第一篇----开发者接入

    在项目的根目录或者特定的文件夹内,创建一个ashx文件(一般处理程序文件),如图 public void ProcessRequest(HttpContext context) { context.R ...

  7. socket.io 中文手册 socket.io 中文文档

    socket.io 中文手册,socket.io 中文文档转载于:http://www.cnblogs.com/xiezhengcai/p/3956401.html 服务端 io.on('connec ...

  8. HTTP头信息解读

    本文为多篇“HTTP请求头相关文章”及<HTTP权威指南>一书的阅读后个人汇总整理版,以便于理解. 通常HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息.客户端向服务器发 ...

  9. 一个打砖块的小游戏1.0 KILL THE BLOCKS !

    /******************************************** * 程序名称:MR.DUAN 的打砖块(KILL THE BLOCKS !) * 作 者:WindAutum ...

  10. 神器-Sublime Text 3 代码编辑器安装与使用

    一.软件获取 1.软件下载地址:http://www.sublimetext.com/3. 2.注册机和汉化下载:http://files.cnblogs.com/files/1312mn/subli ...