jQuery 鼠标悬停图片切换动画

Question

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

这很好用，但变化是突然的。我想添加一个轻微的fadeIn()效果，使颜色似乎淡入和淡出。我写了下面的代码，但没有起作用。(图片会改变，但效果没有渐变或延迟)。我做错了什么？

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

- Todd Davis

---

你不能淡入一个.src的变化。为了在旧图像淡出时淡入新图像，你可能需要使用两个重叠的图像，并淡入其中一个并淡出另一个。 - jfriend00

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

- mrtsherman

---

@jfriend00 - 谢谢，我不知道fadeToggle！ - mrtsherman

嗨@mrtsherman，您会如何使用SASS编写CSS呢？ :) https://dev59.com/xGQn5IYBdhLWcg3wVF_i - Leon Gaban

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">

重申一下，您将在另一张图像的顶部淡入一个新图像。您也可以同时淡出灰度图像。

- mc.

Answer 3

你在哪里渐隐？ 淡入使用 display:block，其不透明度从 0 变为 100。 淡出使用 display:none，其不透明度从 100 变为 0。

一旦完成淡入，图像就会显示为 display:block，不透明度为 100。 因此，您将看不到动画。因此，在再次淡入之前，请执行 display: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');
                });
              }
            );

- Jashwant

Answer 4

试试这个

 $("#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。

- Ranganadh Paramkusam

Answer 5

试试这个

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

- piyush prajapati

Answer 6

更好的解决方案：

不要使用JavaScript来完成这项工作。使用CSS的sprites代替。如果您坚持要使用fadeIn、fadeOut，请使用过渡效果。

更新：回应下面的评论，我无法编写一些代码，因为我无法预测Todd的精灵图中的尺寸和位置。我还想澄清一点，我的建议是使用精灵图，然后使用过渡效果来增强“功能”，而不仅仅是使用过渡效果，因为我假设他需要在IE8和IE9中运行。

- r_31415

---

一个只讨论精灵而不涉及如何进行图像转换的网站并没有什么帮助。这根本没有回答他的问题。 - mrtsherman

同意精灵注释与主题无关；但是你可以使用CSS3过渡来实现这一点；我只想看到代码。 - Greg Pettit

谢谢你的建议。我对使用精灵并不太熟悉，我想要去了解一下，所以这是一个很好的"催促"。:) - Todd Davis

Answer 7

你可以使用CSS3的过渡效果来实现交叉淡化。虽然不是所有浏览器都支持，但仍然可以尝试一下。 http://www.w3schools.com/css3/css3_transitions.asp

类似于CSS：图像链接，在悬停时更改的方式。

例如：

#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');
}

- Steinwolfe