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 相关文章推荐
javascript整除实现代码
Nov 23 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
图解javascript作用域链
May 27 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
js实现简单的随机点名器
Sep 17 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
第一个无线电台是由谁发明的
2021/03/01 无线电
php判断用户是否手机访问代码
2015/06/08 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
jquery.validate分组验证代码
2011/03/17 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
Python实现数据库编程方法详解
2015/06/09 Python
Python实现配置文件备份的方法
2015/07/30 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
高二化学教学反思
2014/01/30 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
民事和解协议书格式
2014/11/29 职场文书
2014年人事部工作总结
2014/12/03 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
爱国主义主题班会
2015/08/14 职场文书
小学班主任教育随笔
2015/08/15 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python