编程 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的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)

Jan 29 Javascript

基于jQuery全屏焦点图左右切换插件responsiveslides

Sep 07 Javascript

jQuery实现布局高宽自适应的简单实例

May 28 Javascript

BootStrap初学者对弹出框和进度条的使用感觉

Jun 27 Javascript

jquery请求servlet实现ajax异步请求的示例

Jun 03 jQuery

js实现登录与注册界面

Nov 01 Javascript

vue.js响应式原理解析与实现

Jun 22 Javascript

原生JS实现前端本地文件上传

Sep 08 Javascript

详解javascript对数组和json数组的操作

Apr 15 Javascript

Vue.js中该如何自己维护路由跳转记录

May 19 Javascript

vue使用swiper.js重叠轮播组建样式

Nov 14 Javascript

使用Vue实现一个树组件的示例

Nov 06 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