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 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
js面试题之异步问题的深入理解
Sep 20 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的一个登录的类 [推荐]
2007/03/16 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
PHP中Array相关函数简介
2016/07/03 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
PHP微商城开源代码实例
2019/03/27 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
Django框架下在视图中使用模版的方法
2015/07/16 Python
python图像常规操作
2017/11/11 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
计算机网络毕业生自荐信
2013/10/01 职场文书
体育课课后反思
2014/04/24 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
同学聚会通知书
2015/04/20 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
解决Redis启动警告问题
2022/02/24 Redis