jQuery使用slideDown、stop、slideUp实现画面的展开、收起和停止
时间:2018-11-07
本文章向大家介绍jQuery使用slideDown、stop、slideUp实现画面的展开、收起和停止,需要的朋友可以参考一下
主要用到动画效果中的三个操作
("#id").slideDown(3000); // 后面的数字表示效果的时长
("#id").stop();
("#id").slideUp(3000);
代码如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>展开和收起</title> 6 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 7 <script> 8 $(document).ready(function(){ 9 $("#flip").click(function(){ 10 $("#contain").slideDown(3000); 11 }); 12 $("#stop").click(function(){ 13 $("#contain").stop(); 14 }); 15 $("#pack-up").click(function(){ 16 $("#contain").slideUp(3000); 17 }); 18 }); 19 </script> 20 21 <style> 22 23 html,body{ 24 margin: 0; 25 padding: 0; 26 } 27 #main{ 28 width: 500px; 29 margin: 0 auto; 30 } 31 #btn>button{ 32 border-radius: 4px; 33 font-size: 16px; 34 background: rgb(127, 28, 150); 35 color: rgb(223, 219, 219); 36 outline: none; 37 margin: 10px 0; 38 } 39 40 #panel{ 41 width: 300px; 42 color: #eee; 43 font-family: cursive; 44 text-align: center; 45 } 46 #title{ 47 background-color: rgb(105, 24, 180); 48 font-size: 20px; 49 } 50 #contain{ 51 background-color:blueviolet; 52 padding: 20px auto; 53 } 54 </style> 55 </head> 56 <body> 57 <div id="main"> 58 <div id="btn"> 59 <button id="flip">展开</button> 60 <button id="stop">停止</button> 61 <button id="pack-up">收起</button> 62 </div> 63 <div id="panel"> 64 <div id="title">初恋</div> 65 <div id="contain">当初相遇苹果林,<br> 66 你才挽起少女的发型。<br> 67 前鬓插着如花的彩梳,<br> 68 映衬着你的娟娟玉容。<br><br> 69 70 你脉脉地伸出白净的手,<br> 71 捧起苹果向我相赠。<br> 72 淡红秋实溢清香啊!<br> 73 正如你我的一片初衷。<br><br> 74 75 我因痴情犹入梦境,<br> 76 一声叹息把你的青丝拂动。<br> 77 此时似饮合欢杯啊!<br> 78 杯中斟满了你的恋情。<br><br> 79 80 苹果林中树荫下,<br> 81 何时有了弯弯的小径?<br> 82 心中“宝塔”谁踏基?<br> 83 耳边犹响着你的细语声声……<br><br> 84 </div> 85 </div> 86 </div> 87 </body> 88 </html>
结果:
- Angular中ngCookies模块介绍
- 如何让jboss eap 6.2+ 的多个war应用共享 jar 包?
- scala 学习笔记(07) 一等公民的函数
- 让BASH,VIM美美的Powerline
- 极品三数666.cn易主,价格让人大惊!
- ui-router中使用ocLazyLoad和resolve
- rpc框架之 avro 学习 2 - 高效的序列化
- rpc框架之HA/负载均衡构架设计
- 使用Docker-Docker for Web Developers(2)
- 打造高效前端工作环境-tmuxinator
- 在Linux Mint上安装node.js和npm
- JS魔法堂:再识Number type
- (cljs/run-at (JSVM. :browser) "搭建刚好可用的开发环境!")
- (cljs/run-at (->JSVM :browser) "语言基础")
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【python-leetcode210-拓扑排序】课程表Ⅱ
- Java实现最小生成树算法之Kruskal算法
- 来我们再聊聊 KMP 算法 -- 我懂,你也得懂
- 【pytorch】简单的线性回归
- 简单的并查集的实现
- 【python-leetcode269-拓扑排序】火星字典
- 通俗点聊聊算法 - 排序(3)快速排序,亲测
- springmvc之如何对表单数据进行校验
- 基于TypeScript封装Axios笔记(七)
- 2015年javaB组1-4题解析与理解
- 【matplotlib】绘制散点图
- LeetCode刷题心得 -- map的妙用
- 2015javaB组第五题表格计算
- 【线性回归】读取txt
- 走近STL - Vector,再次见面