JQuery淡入淡出小Demo
在做WEB前端设计的过程中图片的效果处理必不可少,下面我们看一个例子。
大家在使用demo的时候,要记得引入JQuery文件,在相应的文件路劲下添加俩张图片,图片大一点效果更佳。jQuery fadeTo()可以设定一个透明度的值,一直淡出到这个值。
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jsFile/test.js"></script> <script type="text/javascript" src="jsFile/jquery-2.1.3.js"></script> <script> $(document).ready(function() { $("#btn1").click(function () { $("#img1").fadeIn(3000); $("#img2").fadeOut(3000); }); $("#btn2").click(function(){ $("#img1").fadeToggle(3000); $("#img2").fadeToggle(3000); }) }) </script> </head> <body> <button id="btn1">点击按钮实现图片1淡入,图片2的淡出</button> <button id="btn2">点击实现淡入、淡出</button> <div id="box"> <img id="img1" src="img/0aab2398-fb92-425a-9702-da22b31656da.jpg" style="display: none"> <img id="img2" src="img/218065a2-a803-4c69-9f22-e691dae44566.jpg"> </div> </body> </html>