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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
Javascript Promise用法详解
May 10 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
VSCode 配置uni-app的方法
Jul 11 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小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
numpy实现RNN原理实现
2021/03/02 Python
2014年教师培训的自我评价
2014/01/03 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
综合实践活动总结
2014/05/05 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server