slideDown() 方法

定义和用法

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

语法

$(selector).slideDown(speed,callback)

参数	描述
speed	可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。可能的值：毫秒（比如 1500）"slow" "normal" "fast" 在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其高度。
callback	可选。slideDown 函数执行完之后，要执行的函数。

提示和注释

提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。
注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

实例：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>以滑动方式显示隐藏的 <p> 元素</title><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".btn1").click(function () {$("p").slideUp();});$(".btn2").click(function(){$("p").slideDown();});});</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>

slideToggle() 方法

定义和用法

slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

语法

$(selector).slideToggle(speed,callback)

参数	描述
speed	可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。可能的值：毫秒（比如 1500）"slow" "normal" "fast" 在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
callback	可选。toggle 函数执行完之后，要执行的函数。

提示和注释

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

实例：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>使用滑动效果，在显示和隐藏状态之间切换 <p> 元素：</title><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".btn1").click(function(){$("p").slideToggle();});});</script></head><body><p>This is a paragraph.</p><button class="btn1">Toggle</button></body>
</html>

slideUp() 方法

定义和用法

通过使用滑动效果，如果元素已显示出来的话，隐藏被选元素。

语法

$(selector).slideUp(speed,callback)

参数	描述
speed	可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "normal"。可能的值：毫秒（比如 1500）"slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
callback	可选。toggle 函数执行完之后，要执行的函数。

提示和注释

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

实例：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>以滑动方式隐藏 <p> 元素</title><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".btn1").click(function(){$("p").slideUp(1000);});});</script></head><body><p>This is a paragraph.</p><button class="btn1">Hide</button></body>
</html>

jQuery 效果 ——slideDown() 方法、slideToggle() 方法、slideUp() 方法相关推荐

51 jQuery-使用slideDown()与slideUp()方法实现滑动效果
1.效果图 2.HTML代码 <!DOCTYPE html> <html> <head><meta charset="utf-8"> ...
jQuery学习教程五：jQuery 效果 - 淡入淡出, Fading 方法
实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法. <!DOCTYPE html> <html> <head> <script ...
jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()
jQuery 滑动方法可使元素上下滑动. jQuery slideDown() 方法用于向下滑动元素. $(selector).slideDown(speed,callback); 可 ...
jQuery 效果 - 滑动 slideDown，slideUp，slideToggle的使用
//slideDown() 方法用于向下滑动元素 $(document).ready(function(){$(".flip").click(function(){$(" ...
jQuery 效果 - animate() 方法
实例改变 "div" 元素的高度: $(".btn1").click(function(){ $("#box").animate({hei ...
从任意网页上摘取酷炫Jquery效果为自己使用的方法
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 用的chrome 浏览器 2. 随意百度一个漂亮的jquery效果比如我找到一个可以旋转的 ...
JQuery基本操作 JQueryCSS操作 JQuery筛选选择器 JQuery筛选方法 JQuery效果
JQuery 基本使用原生JS获取的对象就是DOM对象 JQuery方法获取的元素是JQuery对象 (伪数组形式存储) 不能使用原生Js的属性和方法 DOM对象转换为 JQuery 对象 $ ...
笔记--jQuery常用API，事件，其他方法
1. jQuery 选择器 1.1 jQuery 基础选择器原生js获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准. 1.2 jQuery 层级选择 ...
ajax静态加载图片,JQuery实现Ajax加载图片的方法
本文实例讲述了JQuery实现Ajax加载图片的方法.分享给大家供大家参考,具体如下: 最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览. 最先想到的思路是利用缓存,也就是先显示提示消息,然 ...

jQuery 效果 ——slideDown() 方法、slideToggle() 方法、slideUp() 方法

slideDown() 方法

定义和用法

语法

提示和注释

实例：

slideToggle() 方法

定义和用法

语法

提示和注释

实例：

slideUp() 方法

定义和用法

语法

提示和注释

实例：

jQuery 效果 ——slideDown() 方法、slideToggle() 方法、slideUp() 方法相关推荐

最新文章

热门文章