编程 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 相关文章推荐

js汉字排序问题支持中英文混排，兼容各浏览器，包括CHROME

Dec 20 Javascript

使用jquery mobile做幻灯播放效果实现步骤

Jan 04 Javascript

JS getAttribute和setAttribute(取得和设置属性)的使用介绍

Jul 10 Javascript

JavaScript中的Math.sin()方法使用详解

Jun 15 Javascript

微信公众号开发实现点击返回按钮就返回到聊天界面

Dec 15 Javascript

ionic App问题总结系列之ionic点击系统返回键退出App

Aug 19 Javascript

jQuery实现常见的隐藏与展示列表效果示例

Jun 04 jQuery

vue项目搭建以及全家桶的使用详细教程(小结)

Dec 19 Javascript

微信小程序实现的动态设置导航栏标题功能示例

Jan 31 Javascript

微信小程序实现页面跳转传递参数（实体，对象）

Aug 12 Javascript

JavaScript交换变量的常用方法小结【4种方法】

May 07 Javascript

基于js实现数组相邻元素上移下移

May 19 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