jQuery Hover图像更改动画

Question

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

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

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

Answer 1

这里有几个解决方案.您的代码不起作用,因为您正在设置立即更改图像的源.只是加载两个图像,用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();
});?