编程 Javascript

jquery使用slideDown实现模块缓慢拉出效果的方法

Posted in Javascript onMarch 27, 2015

本文实例讲述了jquery使用slideDown实现模块缓慢拉出效果的方法。分享给大家供大家参考。具体分析如下：

下面的JS代码通过按钮控制指定的区域缓慢拉出显示的效果

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#flip").click(function(){
  $("#panel").slideDown("slow");
 });
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

jquery使用slideDown实现模块缓慢拉出效果的方法

- Author -

上大王

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

iis6+javascript Add an Extension File

Jun 13 Javascript

javascript AOP 实现ajax回调函数使用比较方便

Nov 20 Javascript

javascript自动改变文字大小和颜色的效果的小例子

Aug 02 Javascript

javascript实现获取浏览器版本、操作系统类型

Jan 29 Javascript

js+html5操作sqlite数据库的方法

Feb 02 Javascript

JS对大量数据进行多重过滤的方法

Nov 04 Javascript

js实现前端图片上传即时预览功能

Aug 02 Javascript

Angular5升级RxJS到5.5.3报错：EmptyError: no elements in sequence的解决方法

Apr 09 Javascript

vuex与组件联合使用的方法

May 10 Javascript

JS算法题之查找数字在数组中的索引位置

May 15 Javascript

JS实现灯泡开关特效

Mar 30 Javascript

JS ES6异步解决方案

Apr 29 Javascript

jQuery使用slideUp方法实现控制元素缓慢收起

Mar 27 #Javascript

jquery使用animate方法实现控制元素移动

Mar 27 #Javascript

jQuery获取标签文本内容和html内容的方法

Mar 27 #Javascript

Node.js 去掉种子(torrent)文件里的邪恶信息

Mar 27 #Javascript

jQuery使用attr()方法同时设置多个属性值用法实例

Mar 26 #Javascript

jQuery使用prepend()方法在元素前添加内容用法实例

Mar 26 #Javascript

jQuery使用append在html元素后同时添加多项内容的方法

Mar 26 #Javascript

You might like

《逃离塔科夫》——“萌新劝退，老手自嗨”的硬核FPS游戏

2020/04/03 其他游戏

解决phpmyadmin中文乱码问题。。。

2007/01/18 PHP

ThinkPHP进程计数类Process用法实例详解

2015/09/25 PHP

php 使用redis锁限制并发访问类示例

2016/11/02 PHP

thinkphp5.0自定义验证规则使用方法

2017/11/16 PHP

定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内

2019/05/23 PHP

php实现简单的守护进程创建、开启与关闭操作

2019/08/13 PHP

JavaScript编程开发中的五个实用小技巧

2010/07/22 Javascript

JSON.stringify 语法实例讲解

2012/03/14 Javascript

用jquery统计子菜单的条数示例代码

2013/10/18 Javascript

js获取select标签的值且兼容IE与firefox

2013/12/30 Javascript

一个JavaScript防止表单重复提交的实例

2014/10/21 Javascript

React中如何引入Angular组件详解

2018/08/09 Javascript

JS实现图片轮播效果实例详解【可自动和手动】

2019/04/04 Javascript

ES6中Symbol、Set和Map用法详解

2019/08/20 Javascript

vue自定义指令实现仅支持输入数字和浮点型的示例

2019/10/30 Javascript

JS如何寻找数组中心索引过程解析

2020/06/01 Javascript

解决Vue router-link绑定事件不生效的问题

2020/07/22 Javascript

javascript读取本地文件和目录方法详解

2020/08/06 Javascript

JavaScript原生数组函数实例汇总

2020/10/14 Javascript

Vue实现todo应用的示例

2021/02/20 Vue.js

Python分割指定页数的pdf文件方法

2018/10/26 Python

Python使用random.shuffle()打乱列表顺序的方法

2018/11/08 Python

Python多继承以及MRO顺序的使用

2019/11/11 Python

python库skimage给灰度图像染色的方法示例

2020/04/27 Python

美国校服网上商店：French Toast

2019/10/08 全球购物

俄罗斯电子产品、计算机和家用电器购物网站：OLDI

2019/10/27 全球购物

如何撰写岗位职责

2014/02/01 职场文书

21岁生日感言

2014/02/27 职场文书

涉密人员保密承诺书

2014/05/28 职场文书

商务英语专业求职信

2014/06/26 职场文书

个人维稳承诺书

2015/05/04 职场文书

学校党员干部承诺书

2015/05/04 职场文书

2015年教研室工作总结范文

2015/05/23 职场文书

公司财务制度：成本管理控制制度模板

2019/11/19 职场文书

对Keras自带Loss Function的深入研究

2021/05/25 Python