jQuery悬停图像更改动画

我有一个带有灰度图像的img标签.我连接了一个Hover()事件,以便在悬停时将“src”更改为彩色图像,并在鼠标输出时将其更改为灰度.

这很好,但变化是突然的.我想在效果上添加一个轻微的淡入淡出(),使颜色看起来像淡化和渐弱.我写了以下我认为可行的,但没有. (图像会发生变化,但效果不会消退或延迟).我究竟做错了什么？

$("#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();
});​