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 相关文章推荐
JavaScript全局函数使用简单说明
Mar 11 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
微信小程序实现弹出层效果
May 26 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
js实现可爱的气泡特效
Sep 05 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
Syphon 使用方法
2021/03/03 冲泡冲煮
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
Python生成随机数组的方法小结
2017/04/15 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
如何基于python实现不邻接植花
2020/05/01 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
施工安全汇报材料
2014/08/17 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
就业推荐表院系意见
2015/06/05 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
redis数据一致性的实现示例
2022/03/18 Redis
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS