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程序设计有所帮助。

Javascript 相关文章推荐
解密效果
Jun 23 Javascript
js日期时间补零的小例子
Mar 05 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
React 高阶组件HOC用法归纳
Jun 13 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
几个学习PHP的网址
2006/11/25 PHP
php 远程关机操作的代码
2008/12/05 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
采用call方式实现js继承
2014/05/20 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python yield 小结和实例
2014/04/25 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
用python做游戏的细节详解
2019/06/25 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
链表面试题-一个链表的结点结构
2015/05/04 面试题
办公室内勤岗位职责范本
2013/12/09 职场文书
党员思想汇报范文
2013/12/30 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
出差报告范文
2014/11/06 职场文书
2014年度培训工作总结
2014/11/27 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers