淡入淡出可以让我们的网页更加美观，更加丰富，今天来看一下淡入淡出效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/jquery-3.4.1.js"></script> <style> #one{ width: 100px; height: 100px; background-color: lightblue; display: none; position: absolute; top: 50px; } #two{ width: 100px; height: 100px; background-color: hotpink; display: none; position: absolute; top: 150px; } #three{ width: 100px; height: 100px; background-color: yellow; display: none; position: absolute; top: 250px; } </style> </head> <body> <button id="but1">点击淡入</button> <button id="but2">点击淡出</button> <div id="one"></div> <div id="two"></div> <div id="three"></div> <button id="but3" >消失</button> <div id="four" style="margin-left: 140px;">拜拜啦~</div> </body> <script type="text/javascript"> $(document).ready(function(){ $("#but1").click(function(){ $("#one").fadeIn(1000); $("#two").fadeIn(1200); $("#three").fadeIn(1400); $("#one").animate({left:'250px'},1000); $("#two").animate({left:'150px'},800); $("#three").animate({left:'50px'},700); }) }); $(document).ready(function(){ $("#but2").click(function(){ $("#one").animate({left:'0px'},1000); $("#two").animate({left:'0px'},800); $("#three").animate({left:'0px'},700); $("#three").fadeOut(1000); $("#two").fadeOut(3000); $("#one").fadeOut(5000); }) }) $(document).ready(function(){ $("#but3").click(function(){ $("#four").hide(2000,function(){ alert("再见了，妈妈我今晚，就要远航") }) }) }) </script> </html>
