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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 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
Terran剧情介绍
2020/03/14 星际争霸
PHP中JSON的应用技巧
2015/10/10 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
js获取Get值的方法
2016/09/29 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Python常见的pandas用法demo示例
2019/03/16 Python
用python对oracle进行简单性能测试
2020/12/05 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
美国NBA官方商店:NBA Store
2019/04/12 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
大学毕业生推荐信
2014/07/09 职场文书
土建施工员岗位职责
2014/07/16 职场文书
销售助理岗位职责
2015/02/11 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
个人廉洁自律总结
2015/03/06 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS