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获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
JavaScript Array对象详解
Mar 01 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
Angular简单验证功能示例
Dec 22 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
原生JS进行前后端同构
Apr 22 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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用mysql数据库存储session的代码
2010/03/05 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
微信支付开发订单查询实例
2016/07/12 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
PHP7 新增功能
2021/03/09 PHP
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
Python中的pass语句使用方法讲解
2015/05/14 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python subprocess库的使用详解
2018/10/26 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
营销总经理岗位职责
2014/02/02 职场文书
五年级音乐教学反思
2014/02/06 职场文书
考核工作实施方案
2014/03/30 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
初三毕业评语
2014/12/26 职场文书
英文投诉信格式
2015/07/03 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python