使用Jquery实现图片渐变效果

www.icon-king.com

原理：使用两张背景略为不同的图片，第一张采用绝对布局，为hover-out时的状态；第二张采用默认布局，为hover-on状态，当鼠标滑过时，将第一张图片的透明度慢慢减为0，鼠标移出时将透明度慢慢加为1

<a id="defaultTheme" class="rolloverlink" value="default"> <img class="baseImage" src="skins/common/images/index/featured-1.jpg" ></img><img class="overImage" src="skins/common/images/index/featured-1-on.jpg"></img> </a> <a id="skyblueTheme" class="rolloverlink" value="skyblue"> <img class="baseImage" src="skins/common/images/index/featured-2.jpg" ></img><img class="overImage" src="skins/common/images/index/featured-2-on.jpg"></img> </a>

控制代码：

$(".rolloverlink").hover(function(){ $(this).find(".baseImage").stop().animate( { opacity: '0' } , 1000 ); },function(){ $(this).find(".baseImage").stop().animate( { opacity: '1' } , 1000 ); });

IE6、7上需要注意：</img>和下一个<img>之间不能有空格