编程 Javascript

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程序设计有所帮助。

jquery使用slideDown实现模块缓慢拉出效果的方法

- Author -

上大王

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

浅析offsetLeft,Left,clientLeft之间的区别

Nov 30 Javascript

js select option对象小结

Dec 20 Javascript

jQuery淡入淡出元素让其效果更为生动

Sep 01 Javascript

js实现鼠标点击文本框自动选中内容的方法

Aug 20 Javascript

IE中document.createElement的iframe无法设置属性name的解决方法

Sep 14 Javascript

JS动态日期时间的获取方法

Sep 28 Javascript

JS遍历数组及打印数组实例分析

Jan 21 Javascript

AngularJS ng-change 指令的详解及简单实例

Jul 30 Javascript

jQuery层次选择器用法示例

Sep 09 Javascript

关于vue.js过渡css类名的理解(推荐)

Apr 10 Javascript

mongoose设置unique不生效问题的解决及如何移除unique的限制

Nov 07 Javascript

Promise.all中对于reject的处理方法

Aug 01 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

Laravel 4 初级教程之视图、命名空间、路由

2014/10/30 PHP

PHP基于递归算法解决兔子生兔子问题

2018/05/11 PHP

javascript:void(0)的真正含义实例分析

2008/08/20 Javascript

Javascript学习笔记4 Eval函数

2010/01/11 Javascript

js自动闭合html标签(自动补全html标记)

2012/10/04 Javascript

jquery 合并内容相同的单元格(示例代码)

2013/12/13 Javascript

js通过元素class名字获取元素集合的具体实现

2014/01/06 Javascript

js获取checkbox复选框选中的选项实例

2014/08/24 Javascript

jQuery实现瀑布流布局

2014/12/12 Javascript

jQuery简单实现中间浮窗效果

2016/09/04 Javascript

JS实现给对象动态添加属性的方法

2017/01/05 Javascript

ajax+node+request爬取网络图片的实例(宅男福利)

2017/08/28 Javascript

Angular利用trackBy提升性能的方法

2018/01/26 Javascript

Vue.js点击切换按钮改变内容的实例讲解

2018/08/22 Javascript

对angularJs中$sce服务安全显示html文本的实例

2018/09/30 Javascript

jQuery+Datatables实现表格批量删除功能【推荐】

2018/10/24 jQuery

react同构实践之实现自己的同构模板

2019/03/13 Javascript

[03:24]2014DOTA2国际邀请赛神秘商店生意火爆

2014/07/18 DOTA

python编写暴力破解FTP密码小工具

2014/11/19 Python

浅谈Python单向链表的实现

2015/12/24 Python

python3使用urllib模块制作网络爬虫

2016/04/08 Python

python 打印出所有的对象/模块的属性(实例代码)

2016/09/11 Python

基于python list对象中嵌套元组使用sort时的排序方法

2018/04/18 Python

python 平衡二叉树实现代码示例

2018/07/07 Python

在Python 中实现图片加框和加字的方法

2019/01/26 Python

Python GUI学习之登录系统界面篇

2019/08/21 Python

详解python中*号的用法

2019/10/21 Python

scrapy爬虫:scrapy.FormRequest中formdata参数详解

2020/04/30 Python

C#和SQL Server的面试题

2016/08/12 面试题

村委会贫困证明

2014/01/14 职场文书

三下乡活动方案

2014/01/31 职场文书

心得体会格式及范文

2016/01/25 职场文书

导游词之峨眉山

2019/12/16 职场文书

OpenCV-Python实现轮廓的特征值

2021/06/09 Python

Feign调用全局异常处理解决方案

2021/06/24 Java/Android

使用kubeadm命令行工具创建kubernetes集群

2022/03/31 Servers