基本动画:http://www.cnblogs.com/307914070/archive/2011/01/07/1929643.html
接下来做一个 淡入淡出 的效果:
要使用到的Jquery函数有:fadeTo ,fadeIn,fadeOut 这三个函数,其中还需对图片实现半透明效果。
所使用到的是CSS的相关知识:alpha。
页面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery 动画之 - 淡入淡出效果</title> <script src="Script/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script> <!-- 设定初始透明度 --> <style type="text/css"> img{ filter:alpha(opacity=30);opacity:0.3;} </style> </head> <body> <div style="1024px; margin:0 auto;"> <div > <div id="div2" style=" 1024px;" > <div ><img id="img1" src="Image/01.jpg" alt="01" /> <img id="img2" src="Image/02.jpg" alt="02" style="filter:alpha(apacity=100);opacity:1" /> <img id="img3" src="Image/03.jpg" alt="03" /> </div> </div> </div> <script type="text/javascript" language="javascript"> //鼠标进入 $("img").mouseover(function (event) { $(this).fadeTo("200", 1); }); //鼠标移走 $("img").mouseout(function (event) { $(this).fadeTo("200", 0.22); }); </script> </body> </html>
页面加载效果:
鼠标移动效果1:
鼠标移动效果2: