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.
jQuery(5)——jQuery fade淡入淡出效果
原文地址：https://www.cnblogs.com/famine/p/9734300.html