jquery - jQuery Hover 图像变化动画

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

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 元素，而 '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 之前再做一个 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');
                });
              }
            );

Answer 4

更好的解决方案：

忘记 javascript 来完成这项工作。改用 CSS 的精灵。如果您坚持使用淡入淡出，请使用过渡。

更新：回应下面的评论，我无法编写一些代码，因为我无法预测托德精灵中的尺寸和位置。我还想澄清一下，我的建议是使用精灵，然后使用过渡来增强“功能”，而不仅仅是过渡，因为我认为他需要它才能在 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');
          }
        );​

这是小提琴

Answer 6

您也可以使用过渡使用 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');
}

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