jQuery(5)——jQuery fade淡入淡出效果

本文主要是介绍jQuery(5)——jQuery fade淡入淡出效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

jQuery fade淡入淡出效果

淡入淡出效果是基于透明度的变换而实现的。在测试demo的时候可以在控制台查看elements中的opacity的变换

在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()

语法

$(selector).fadeXXX(speed,callback);

他们都可以有两个可选参数：

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

demo:

//fadeOut、fadeIn$("#btn").click(function(){$("#show").fadeOut("slow",function(){ //callback()$("#show").fadeIn("slow");});})

fadeToggle()

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

demo:

//fadeToggle$("#btn2").click(function(){ $("#show2").fadeToggle();})

fadeTo()

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

fadeTo()除了拥有两个可选参数外，还有一个必选参数opacity.
语法：

$(selector).fadeTo(speed,opacity,callback);

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

demo:

//fadeTo//$(selector).fadeTo(speed,opacity,callback)$("#btn3").click(function(){ $("#show3").fadeTo("slow",0.5);})

测试demo:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>jQuery fade淡入淡出效果</title><meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script>$(document).ready(function(){//fadeOut、fadeIn$("#btn").click(function(){$("#show").fadeOut("slow",function(){ //callback()$("#show").fadeIn("slow");});})//fadeToggle$("#btn2").click(function(){ $("#show2").fadeToggle();})//fadeTo//$(selector).fadeTo(speed,opacity,callback)$("#btn3").click(function(){ $("#show3").fadeTo("slow",0.5);})})</script><style>.box{width: 300px;margin:0 auto;border: 2px solid green;}#show,#show2,#show3{width:296px;height: 100px;margin:0 auto;border: 2px solid red;background-color: rgb(250, 205, 80);}</style>
</head>
<body><div class="box"><input type="button" id="btn" value="淡出+淡入"><div id="show"></div></div><div class="box"><input type="button" id="btn2" value="toggle 自行判断使用"><div id="show2"></div></div><div class="box"><input type="button" id="btn3" value="fadeTo可自定义要达到的透明度"><div id="show3"></div></div>
</body>
</html>

demo预览
See the Pen jQuery淡入淡出 by 练涛 (@liantao) on CodePen.

See the Pen jQuery淡入淡出 by 练涛 (@liantao) on CodePen.