jQuery中淡出动画fadeOut，jQuery基础(四)

第4章动画切换的比较
编程：4-1 jQuery中toggle与slideToggle以及...

jQuery中淡出动画fadeOut

让元素在页面不可见，常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的。这里要提一个透明度的方法，设置元素透明度为0，可以让元素不可见，透明度的参数是0~1之间的值，通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。

fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果

所谓"淡出"隐藏的，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏。

.fadeOut( [duration ], [ complete ] )

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400毫秒的延时

任务

?不会了怎么办

index.html

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
代码

全部精华我要发布

var v=$('#animation').val();放在函数外面为什么就不行了呢？

最新回答 / sfanxi

是可以的，你应该是其他哪里出错了，这里不要忘记加个s了，https <script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

2 回答 1334 浏览

2018-08-13

fadeOut不改变高度和宽度，为什么下面的按钮还是会移上去？

最新回答 / 0辔b5兎篁彸艨媈

fadeOut在淡出过程中不改变高度和宽度, 但是淡出结束后元素会隐藏, 隐藏之后就不占空间

1 回答 1318 浏览

2018-07-30

linear这个传进去有什么用？

已采纳回答 / Jerps

表示线性变化，简单来说就是匀速变化

1 回答 1453 浏览

2018-03-14

val()方法如何返回number类型的值

已采纳回答 / qq_徐涛_0

应该可以通过number类型进行转换的意思吧

4 回答 2575 浏览

2022-07-04

运行没效果

最新回答 / 嘤嘤嘤嘤哼

4 回答 1091 浏览

2018-08-03

设置了value之后val弹出的怎么不是一个东西

最新回答 / 洋葱_dot

val()代表的是value值

3 回答 1122 浏览

2017-04-28

用switch语句没有显示？？那里面错了？

已采纳回答 / 吴彦祖的帅气

//错误点：//1.淡出为fadeOut,不是faseOut;//2.btnShow跟你前面的id名字大小写不一样。<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> p{ col...

3 回答 1766 浏览

2018-06-11

为什么v=4的时候，弹出2下提示框，谁知道原因吗？还有linear参数是什么意思？求高手解答。

最赞回答 / 笛子

1、提个建议在提问题之前应该先自己去看看评论和笔记什么的，你问的这个问题在里面都有答案，如果没有答案至少要去百度一下，实在是找不到答案在来问别人。衣来伸手饭来张口，不利于自己的成长。2、解答第一个问题，弹出两下提示框的原因。代码中存在两个<p>元素，元素的动画都是相互独立的，也就是说，每一个<p>元素都独立的执行了一遍脚本，所以会都会弹出一次提示框，这样就会弹出两次。你可以自己试一下，有多少个<p>标签就会弹出多少次提示框。第二个问题，linear参数是什么意思。lin...

1 回答 1351 浏览

2018-03-29

switch字符类型

已采纳回答 / qq_苏慕遮_24019744

val就是用来转换成数值的，这个v指的就是数值，后面的value==“1”什么的引号可以去掉，没有影响

2 回答 1112 浏览

2017-10-20

这样写没有效果，请问哪里不对吗？

已采纳回答 / 慕侠在此

v是一个字符串，你case后边跟的是一个数字

3 回答 1366 浏览

2018-10-10

里面的是对象吧？

最新回答 / 无言的兔子

是两个参数duration：是动画执行的时间complete：是动画执行结束后，调用的回调函数（就是动画执行完了后，再执行的动作）

2 回答 1005 浏览

2016-08-31

代码执行顺序

最赞回答 / weibo_好好死一回_0

咦，和代码执行顺序没关系呀。<...code...>因为HTML里头有两个<p>标签，所以这一段里的$("p")是一个合集嘛。你可以理解为它是一个有两个元素的数组，那么fadeTo对象自然要执行两次喽~欢迎追问~

1 回答 797 浏览

2016-11-23

fadeOut(option)是什么意思？

最新回答 / 慕前端5296299

额。。看了下代码明白了。。。

1 回答 1288 浏览

2016-08-23

不是说不改变宽高的吗，为啥在淡出的时候下面的元素会占据p标签的位置？

已采纳回答 / 虢嘉

切换完后改变了display的值。例如$("elem").fadeIn();会将elem的display属性值从block切换成none（slideUp也是），但是elem元素再调用fadeOut()将其显示后的宽高是没有变的。右键检查，文档里会有个内联样式，点击执行函数，里面会显示宽高在动态的变化。

4 回答 1577 浏览

2016-10-04

$("p").fadeOut(1000, "linear");中的“linear”是什么意思？有什么作用

已采纳回答 / 淡漠2

匀速变化

1 回答 2090 浏览

2016-08-23

全部我要发布

最热最新

只看我的

3-1 jQuery中淡出动画fadeOut