jQuery 效果 - slideDown() 方法[菜单导航栏常用]
实例
以滑动方式显示隐藏的 <p> 元素:
$(".btn2").click(function(){
$("p").slideDown();
});
定义和用法
slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。
语法
$(selector).slideDown(speed,callback)
参数 | 描述 |
---|---|
speed |
可选。规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。 可能的值:
在设置速度的情况下,元素从隐藏到可见的过程中,会逐渐地改变其高度。 |
callback |
可选。slideDown 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数,否则不能设置该参数。 |
提示和注释
提示:如果元素已经是完全可见,则该效果不产生任何变化,除非规定了 callback 函数。
注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。
测试代码:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".hide").click(function(){
$("p").slideUp(1000);
});
$(".show").click(function(){
$("p").slideDown(1000);
});
});
</script>
</head>
<body>
<button class="hide">隐藏</button>
<button class="show">显示</button>
<p>滑动隐藏和显示...</p>
</body>
</html>
jQuery 效果 - slideDown() 方法[菜单导航栏常用]的更多相关文章
- jquery自定义插件-参数化配置多级菜单导航栏插件
1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. ...
- 用Jquery 仿VS 样式的 导航栏插件
在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个. 由于前台用JQuery开发, 想到网上很多人用JQuery做插件, ...
- [转]jQuery的each方法的几种常用的用法
下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下: var arr = [ "one", "two", "three&quo ...
- 用jquery制作一个简单的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- iOS开发之 -- 判断tableview/scrollview的滑动方法,及导航栏渐变的实现代码
开发的过程中,肯定会用到在视图想上滑动的时候,在导航处做一些操作,比如向上滑动的时候,做个动画,出现一个搜索框,或者其他的操作,那么我们怎么来判断它的滑动方向呢? 首先我们应该知道tableview继 ...
- 使用Design包实现QQ动画侧滑效果和滑动菜单导航
Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...
- 【原创】js实现一个可随意拖拽排序的菜单导航栏
1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...
- jQuery 效果 - animate() 方法
http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1" ...
- jQuery 效果 - fadeTo() 方法
实例 使用淡出效果来隐藏一个 <p> 元素: $(".btn1").click(function(){ $("p").fadeTo(1000,0.4 ...
随机推荐
- 移植u-boot-1.1.6之mtdparts分区
和u-boot高版本不同,mtdparts命令没有cmd_mtdparts这么一个单独的文件来实现. 不过,搜索uboot可以在cmd_jffs2.c里面看到如下代码: U_BOOT_CMD( mtd ...
- Git一张图学习
- source insight用于C语言编程的工具脚本
简单来说,source insight提供的功能功能还不够傻瓜,用起来还不够方便,所以写了此脚本,提高开发效率. 部分source insight提供的功能也包含了进来,主要是因为我不喜欢使用太多的快 ...
- iostat命令简单说说
tps: 每秒钟发送到的I/O请求数. Blk_read /s: 每秒读取的block数 Blk_wrtn/s: 每秒写入的block数 Blk_read: 读入的block总数 Blk_wrtn: ...
- thinkphp foreach循环生成二维数组的方法
先做个问题记录,另外下面是做的过程中遇到的一个没想明白的现象 foreach($result as $key => $val ){ $wzList[$key]['lik']=$val[0]; $ ...
- Thinkpad 小紅點設定
因为我只需要这么多设置,所以就只写这么多了sudo gedit /etc/rc.local echo -n 240 > /sys/devices/platform/i8042/serio1/se ...
- JQuery遍历指定id的div name值的几种方法
JQuery遍历指定id的div name值的几种方法:方法一 $("#div1 :text").each(function () { var this_id = $(this). ...
- DELPHI 使用dbexpress控件连接MySQL数据库方法
1. 在窗体上放置4个控件: SQLConnection1,SimpleDataSet1,DataSource1,DBGrid (注意: 如果 出现"Operation not allowe ...
- SynchronizationContext一篇
SynchronizationContext context; 最近写代码用到了这个,特别记录一下. 作用如下: // 摘要: // 提供在各种同步模型中传播同步上下文的基本功能. public cl ...
- Python初学者笔记(4)-简单的通讯录
要求: 编写一个简单的通讯录 1.通讯录包含至少包含姓名.电话号码.电子邮箱:2.通讯录的信息能够保存在本地磁盘:3.通讯录查找特定人员的信息:4.通讯录能够修改特定人员的信息:5.通讯录能够删除特定 ...