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 相关文章推荐
使用隐藏的new来创建对象
Mar 29 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
js实现详情页放大镜效果
Oct 28 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将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
文本加密解密
2006/06/23 Javascript
快速保存网页中所有图片的方法
2006/06/23 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
python双向链表实现实例代码
2013/11/21 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
十个Python程序员易犯的错误
2015/12/15 Python
python os.path模块常用方法实例详解
2018/09/16 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Django REST 异常处理详解
2020/07/15 Python
实例代码讲解Python 线程池
2020/08/24 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
大学生专科毕业生自我评价
2013/11/17 职场文书
教师节活动主持词
2014/04/02 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS