26十二/1118
jQuery简单的淡入淡出效果
今天终于做出了自己的第一个jQuery特效，心情是多云转晴啊。这得感谢小桌给了我这个锻炼的机会，呵呵。
它实现的是一个简单的淡入淡出的效果，如图：
jquery淡入淡出
在这里把代码给大家贴出来
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jqery</title> <META http-equiv=X-UA-Compatible content=IE=EmulateIE7> </head> <script type="text/javascript" src="jquery-1.5.1.js"></script> <style type="text/css"> .box{ margin:auto 0; width:302px; height:auto; background:#CCC; text-align:left;} .box_son{ float:left;width:100px; height:100px; background:#999; margin-top:1px; text-align:center; line-height:100px; overflow:visible;_overflow:hidden; } .box_son_son{ float:left;width:0; height:100px; background:#567FD0; position:relative; left:101px; top:-100px;filter:Alpha(opacity=36); opacity:0.36; text-align:center; line-height:100px; text-align:center;display:none;} .test{ width:100px; height:100px; } .ml{ margin-left:1px;} span{float:left;width:100px; height:100px; cursor: pointer;} /*padding:1px;/FF;padding:1px\9;/IE8;*padding:1px;/IE7;_padding:1px;/IE6*/ {padding:1px;padding:10px;} </style> <body> <script type="text/javascript"> $(document).ready(function(){ $(".box_son span").hover(function(){ $(this).next(".box_son_son:not(:animated)").animate({opacity: "show", width: "+=201px"}, "slow",function(){ $(".box_son_son").css({ opacity: 0.36 }); }); }); $(".box_son span").mouseout(function(){ $(this).next(".box_son_son").animate({opacity: "hide", width: "0"}, "500"); }); }); </script> <center> <div class="box"> <div class="box_son"><span>图</span><div class="box_son_son">jquery</div></div> <div class="box_son ml"><span>图</span><div class="box_son_son">jquery</div></div> <div class="box_son ml"><span>图</span><div class="box_son_son">jquery</div></div> <div class="box_son"><span>图</span><div class="box_son_son">jquery</div></div> <div class="box_son ml"><span>图</span><div class="box_son_son">jquery</div></div> <div class="box_son ml"><span>图</span><div class="box_son_son">jquery</div></div> </div> </center> </body> </html> |