jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()

最新推荐文章于 2022-11-11 23:00:55 发布

weixin_30590285

最新推荐文章于 2022-11-11 23:00:55 发布

阅读量902

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pzw23/p/10352946.html

这篇博客主要介绍了jQuery中的四个重要动画效果：fadeIn用于元素淡入，fadeOut用于元素淡出，fadeToggle在淡入和淡出之间切换，而fadeTo则可以自定义透明度变化，实现更灵活的淡入淡出效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fadeIn()，fadeOut()，fadeToggle()，fadeTo()

fadeIn()-----淡入已经隐藏的元素（把隐藏的被选元素渐渐显示出来）。

语法：$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长,可以是："slow"、"fast" 或毫秒。

可选的 callback 参数是该fadeIn()完成后所执行的函数名称。

fadeOut()----淡出可见的元素（把可见的被选元素渐渐隐藏起来）。

语法：$(selector).fadeOut(speed,callback);

speed和callback同上。

fadeToggle()----可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

语法：$(selector).fadeToggle(speed,callback);

speed和callback同上。

fadeTo()-----允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：$(selector).fadeTo(speed,opacity,callback);

speed是必需的，该参数规定效果的时长，可以是："slow"、"fast" 或毫秒。

opacity是必需的，该参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间），越小越透明，0是完全透明（看不见），1是不透明。

callback同上。

<html>
<head>
<script src="./jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){

$("button#d").mousedown(function(){
$("button#d").css("color","red");
$("p#a").fadeOut("fast");
$("p#b").fadeOut("slow");
$("p#c").fadeOut(2000);
});
$(