主要用到动画效果中的三个操作

　　("#id").slideDown(3000)； // 后面的数字表示效果的时长
　　("#id").stop();
　　("#id").slideUp(3000);
 
代码如下：
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>展开和收起</title>

     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

     <script>

     $(document).ready(function(){

         $("#flip").click(function(){

             $("#contain").slideDown(3000);

         });

         $("#stop").click(function(){

             $("#contain").stop();

         });

         $("#pack-up").click(function(){

             $("#contain").slideUp(3000);

         });

     });

     </script>

     <style>

         html,body{

             margin: 0;

             padding: 0;

         }

         #main{

             width: 500px;

             margin: 0 auto;

         }

         #btn>button{

              border-radius: 4px;

              font-size: 16px;

              background: rgb(127, 28, 150);

              color: rgb(223, 219, 219);

              outline: none;

              margin: 10px 0;

         }

         #panel{

             width: 300px;

             color: #eee;

             font-family: cursive;

             text-align: center;

         }

        #title{

            background-color: rgb(105, 24, 180);

            font-size: 20px;

        }

         #contain{

          background-color:blueviolet;

          padding: 20px auto;

         }

     </style>

 </head>

 <body>

     <div id="main">

         <div id="btn">

             <button id="flip">展开</button>

             <button id="stop">停止</button>

             <button id="pack-up">收起</button>

         </div>

         <div id="panel">

             <div id="title">初恋</div>

             <div id="contain">当初相遇苹果林，<br>

             你才挽起少女的发型。<br>

                 前鬓插着如花的彩梳，<br>

                 映衬着你的娟娟玉容。<br><br>

                 你脉脉地伸出白净的手，<br>

                 捧起苹果向我相赠。<br>

                 淡红秋实溢清香啊！<br>

                 正如你我的一片初衷。<br><br>

                 我因痴情犹入梦境，<br>

                 一声叹息把你的青丝拂动。<br>

                 此时似饮合欢杯啊！<br>

                 杯中斟满了你的恋情。<br><br>

                 苹果林中树荫下，<br>

                 何时有了弯弯的小径？<br>

                 心中“宝塔”谁踏基？<br>

                 耳边犹响着你的细语声声……<br><br>

             </div>

         </div>

     </div>

 </body>

 </html>

结果：

jQuery实现画面的展开、收起和停止的更多相关文章

  1. HTML-003-模拟IDE代码展开收起功能简单示例

    当先我们在日常的编程开发工作中使用编程工具(例如 Eclipse.Sublime 等等)都有相应的代码折叠展开功能,如下图所示,极大的方便了我们的编码工作.

  2. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  3. 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起

    Dom与Event简洁代码实现文本展开收起 Xuijs超轻量级的框架 Dom与Event实现文本展开收起 效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

  4. css实现侧边展开收起

    前言:因为突然想研究研究侧边栏滑动展开收起怎么做的,就去baidu了一下transition. 详情 内容1 内容1 内容1 内容1 内容1 右侧有实现demo.就是那个绿色的详情 先来看一下我的代码 ...

  5. [TimLinux] CSS 纯CSS实现动画展开/收起功能

    内容转自CSS世界,理解之后进行了简化,简化后代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /& ...

  6. Vue 实现点击展开收起

    Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...

  7. javasript简单实现文字的展开收起（无动画）

    今天在工作遇到展开和收起的需求,在网上找了很多方法,今天来写一下我觉得比较简单的方法 在项目中需要达到如图这种效果 首先想的是使用overflow简单且粗暴,在需要展开的的文字定义样式 { overf ...

  8. vue.js 实现点击展开收起动画

    最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起, 其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~), ,,接下来分享给大家,先上效果图: .vue页面: ...

  9. el-upload上传列表实现 展开 收起

    # el-upload上传列表实现 展开 收起 #### 无图言*,所以先上最终效果图(想参考代码的可以直接滑到最后) ### 具体实现思路 注意: 每个人的项目环境以及需求,都不尽相同,所以这里仅仅 ...

随机推荐

  1. Java——构造方法和匿名对象

    前言 在编写程序时不安全的初始化会导致程序发生发生重大错误.为了使程序可以被安全地初始化,C++引入了构造器(也可以成为构造方法)的概念,这是一个在创建对象时被自动调用的特殊方法.Java中也采用了构 ...

  2. MySQL中间件之ProxySQL(10)：读写分离方法论

    返回ProxySQL系列文章:http://www.cnblogs.com/f-ck-need-u/p/7586194.html 1.不同类型的读写分离 数据库中间件最基本的功能就是实现读写分离,Pr ...

  3. Django 系列博客（二）

    Django 系列博客(二) 前言 今天博客的内容为使用 Django 完成第一个 Django 页面,并进行一些简单页面的搭建和转跳. 命令行搭建 Django 项目 创建纯净虚拟环境 在上一篇博客 ...

  4. Haskell复习笔记(一)

    Haskell笔记这是第三次总结,前两次都因为各种原因丢失了,对于Haskell我算不上什么大神,只不过在大学时为了学习算法时选择了Haskell. 当时的入门书籍选择的是<Learn You ...

  5. lua的table元类

    Lua中提供的元表是用于帮助Lua数据变量完成某些非预定义功能的个性化行为,如两个table的相加.假设a和b都是table,通过元表可以定义如何计算表达式a+b.当Lua试图将两个table相加时, ...

  6. [转]WEB页获取串口数据

    本文转自:https://www.cnblogs.com/rockyhm/p/3434200.html 最近做一个B/S的项目,需要读取电子秤的值,之前一直没做过,也没有经验,于是在网上找到很多  大 ...

  7. 正则表达式之 \b

    引用网上一段话: \b 是正则表达式规定的一个特殊代码(好吧,某些人叫它元字符,metacharacter),代表着单词的开头或结尾,也就是单词的分界处.虽然通常英文的单词是由空格,标点符号或者换行来 ...

  8. JavaScript 笔记（一）

    Number 1.2345e3=1.2345*1000 NaN//not a num 无法计算结果 Infinity //无限大 数组 var arr=[1,2,'hello'] 下标从0开始 对象 ...

  9. 使用Retrofit2+RxJava2+ProtoBuf实现网络请求

    引言 Retrofit 是一个用于 Android 和 Java 平台的类型安全的,底层使用OkHttp实现网络请求框架.Retrofit 通过将 API 抽象成 Java 接口而让我们连接到 RES ...

  10. String的坑

       想必大家在熟悉不过了,不错今天就遇到了这个万年坑,哪怕喜欢翻源码的人,也不屑一顾翻它的源码,良言相劝最好翻下源码. 1. String为啥被定义为final ? 2. String是线程安全的么 ...