例子，jquery实现图片淡入淡出效果。
<!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>jquery淡入淡出效果_www.jb200.com</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;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>