jQuery悬停图像更改动画

$("#showForm").hover(
              function () {
                $(this).fadeIn('slow',function(){
                    $(this).attr("src",'images/AddButtonSmall.gif');
                });
              },function () {
                $(this).fadeIn('slow','images/AddButtonSmallGray.gif');
                });
              }
            );

这里有几个解决方案.您的代码不起作用,因为您正在设置立即更改图像的源.只是加载两个图像,用CSS覆盖它们然后在父容器被鼠标悬停时淡出一个颜色可能更容易.或者你也可以淡化它们

CSS

.fader { display: inline-block; }
.fader img:last-child {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}​

HTML

<div class="fader">
    <img src="http://placehold.it/300x300/000fff" />
    <img src="http://placehold.it/300x300/fff000" />
</div>​

在鼠标悬停时淡入

http://jsfiddle.net/Xm2Be/3/

$('.fader').hover(function() {
    $(this).find("img:last").fadeToggle();
});​

交叉淡入淡出

http://jsfiddle.net/Xm2Be/2/

$('.fader').hover(function() {
    $(this).find("img").fadeToggle();
});​