实例

以滑动方式显示隐藏的 <p> 元素:

$(".btn2").click(function(){
$("p").slideDown();
});

定义和用法

slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。

语法

$(selector).slideDown(speed,callback)
参数 描述
speed

可选。规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"

在设置速度的情况下,元素从隐藏到可见的过程中,会逐渐地改变其高度。

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() 方法[菜单导航栏常用]的更多相关文章

  1. jquery自定义插件-参数化配置多级菜单导航栏插件

    1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. ...

  2. 用Jquery 仿VS 样式的 导航栏插件

    在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个. 由于前台用JQuery开发, 想到网上很多人用JQuery做插件, ...

  3. [转]jQuery的each方法的几种常用的用法

    下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下:  var arr = [ "one", "two", "three&quo ...

  4. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. iOS开发之 -- 判断tableview/scrollview的滑动方法,及导航栏渐变的实现代码

    开发的过程中,肯定会用到在视图想上滑动的时候,在导航处做一些操作,比如向上滑动的时候,做个动画,出现一个搜索框,或者其他的操作,那么我们怎么来判断它的滑动方向呢? 首先我们应该知道tableview继 ...

  6. 使用Design包实现QQ动画侧滑效果和滑动菜单导航

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp ...

  7. 【原创】js实现一个可随意拖拽排序的菜单导航栏

    1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...

  8. jQuery 效果 - animate() 方法

    http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1" ...

  9. jQuery 效果 - fadeTo() 方法

    实例 使用淡出效果来隐藏一个 <p> 元素: $(".btn1").click(function(){ $("p").fadeTo(1000,0.4 ...

随机推荐

  1. C++类成员函数的 重载、覆盖和隐藏区别

    重载:成员函数被重载的特征: (1)相同的范围(在同一个类中): (2)函数名字相同: (3)参数不同: (4)virtual 关键字可有可无. #include <iostream> u ...

  2. iOS动画 三维透视投影 m34

    transform的结构如下:struct CATransform3D{  CGFloat m11, m12, m13, m14;  CGFloat m21, m22, m23, m24;  CGFl ...

  3. 如何获取tableview中当前选中的cell

    当我们点击某个cell时,会执行下面这个方法,方法中调用另一方法执行具体操作: - (void)tableView:(UITableView *)tableView didSelectRowAtInd ...

  4. 利用Python抓取CSDN博客

    这两天发现了一篇好文章,陈皓写的makefile的教程,具体地址在这里<跟我一起写makefile> 这篇文章一共分成了14个部分,我看东西又习惯在kindle上面看,感觉一篇一篇地复制成 ...

  5. c#的基础入门回顾

    定义:.net 是平台 c#是语言 .net 可以做什么:winform (QQ软件 电脑管家软件等 桌面应用程序)   . asp.net (淘宝网站,京东网站,当当网站等internet网站) . ...

  6. Resources are low on NN. Please add or free up more resources then turn off safe mode manually.

    提交spark应用到yarn集群上的时候在跑一段时间就会出现这个报错: 根据上面的报错原因分析是因为集群资源不够,集群的自我保护机制使hdfs处于安全模式,然后我用"hdfs dfsadmi ...

  7. 将CentOS配置成本地yum

    默认的yum是以网络来安装的,在没有网络或者网速不佳的情况下,通过yum来安装软件是意见非常痛苦的事情.其实对于CentOS DVD来说,里面提供的软件就足以满足我们的需要了,而且DVD里的软件版本都 ...

  8. SequoiaDB(巨杉数据库)(社区版)安装配置使用图解

    SequoaiDB是一款新型企业级分布式非关系型数据库,提供了基于PC服务器的大规模集群数据平台.作为全球第一家企业级文档式 NoSQL分布式数据库,为用户提供了一个高扩展性.高可用性.高性能.易维护 ...

  9. NodeManager起不来

    NodeManager无法启动,解除授权,重新授权! CDH需要注意的表: SELECT * FROM `ROLES` SELECT * FROM CONFIGS WHERE attr LIKE '% ...

  10. HOOK API 在多线程时应该注意的问题点

    在使用INLINE HOOK API实现对系统API的拦截时,正常情况下并没有太大问题,但一旦涉及到多线程,不管是修改IAT还是JMP,2种方法均会出现不可预料的问题,特别是在HOOK一些复杂的大型系 ...