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();
});

Answer 2

 $(this).fadeIn('slow',

实际上是试图慢慢淡入这个元素，而'this'指的是

$("#showForm")

相反，如果你想要你可以将彩色图像直接放在当前的灰度图像上，并将彩色图像标记为隐藏，然后让它慢慢淡入。假设它们位于彼此之上，你可以这样做：

$("#showForm").hover(
    function () {
       $("#colorImageID").fadeIn();
    }, 
    function () {
       $("#colorImageID").fadeOut();
    });
  }

）;

假设html是这样的（其中sameAbsolutePosition是css，将它们放在同一个精确的位置，所以也许像position：absolute; left：20; top：20px;）：

<img src='images/AddButtonSmallGray.gif' class="sameAbsolutePosition">
<img src='images/AddButtonSmall.gif' style="display:none;" class="sameAbsolutePosition">

重申一下，你将在另一张图像上淡化新图像。您也可以同时淡出灰度图像。

Answer 3

你在哪里淡出？淡入执行display:block，不透明度从0更改为100。淡出display:none，不透明度从100变为0。

有一次，你淡出，图像是display:block，不透明度是100.所以，你看不到动画。因此，要么在fadeIn之前再显示：none或fadeOut。

给出了解释事物的例子。您应该根据您的要求进行更改。

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

Answer 4

更好的解决方案：

忘记javascript来完成这项工作。请改用CSS sprites。如果你坚持使用fadeIn，fadeOut，则使用过渡。

UPDATE ：响应下面的评论，我无法编写一些代码，因为我无法预测Todd精灵中的维度和位置。我还想澄清一下，我的建议是使用精灵然后转换来增强“功能”，而不仅仅是转换，因为我认为他需要在IE8和IE9中工作。

Answer 5

试试这个

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

这是Fiddle

Answer 6

你也可以使用css3进行交叉渐变。并非适用于所有浏览器，但仍然... http://www.w3schools.com/css3/css3_transitions.asp

与CSS: image link, change on hover

类似

例如：

#showForm
{
    background: transparent url('images/AddButtonSmallGray.gif') center top no-repeat;

    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}

#showForm:hover {
    background-image: url('images/AddButtonSmall.gif');
}

Answer 7

试试这个

         $(".image_hover").mouseover(function(){
        var old_src=$(this).attr("src");
        var new_src=$(this).attr("data-alt-src");
        $(this).attr('src', new_src);
        $(this).attr('data-alt-src', old_src);
      });
     $(".image_hover").mouseout(function(){
        var old_src=$(this).attr("src");
        var new_src=$(this).attr("data-alt-src");
        $(this).attr('src', new_src);
        $(this).attr('data-alt-src', old_src);
      });

jQuery Hover图像更改动画

7 个答案: