javascript - 实现 javascript 褪色图像鼠标悬停和鼠标移出效果的最佳方法是什么？

Question

我想 jQuery 将是用于执行此操作的库。我当然可以弄清楚如何在鼠标悬停时切换图像的来源，然后在鼠标悬停时将其切换回。但是我怎样才能通过淡入淡出图像来实现这种效果呢？

我已经尝试使用 jQuery Cycle 插件来实现这一点，但我没有成功。我觉得也许有更简单的方法可以做到这一点。我会很感激帮助，有什么想法吗？

Answer 1

将图像放入 DIV 并将 DIV 的背景设置为第一张图像。在 DIV 中放置一个图像标签并将 SRC 指向第二个图像。

现在您可以调整 IMG 的不透明度，将背景图像暴露在它后面，而无需交换任何东西。

使用 .opacity()

确保将尺寸放在包装器 DIV 上，否则一旦内部图像的不透明度变为零，它就会消失。

<div class="wrapper">
   <img src="..." />
</div>

Answer 2

CSS3 正在添加一堆转换属性来处理这样的事情，但目前如果你准备使用 jQuery，你可以使用与and.animate结合的函数。mouseentermouseleave

例子：

$('img')
    .mouseenter(function() {
        $(this).stop(true,true).animate({ opacity: 0.5 }, 2000);
    });
    .mouseleave(function() {
        $(this).stop(true,true).animate({ opacity: 1 }, 2000);
    });

将.stop清除之前的动画并使其完成，这样如果用户多次快速将鼠标悬停在元素上，它就不会让动画在长队列中堆积。

Answer 3

你可以试试这个

$(function(){
  $("imageSelector).mouseover(function(){
      $(this).data("oldSrc", this.src).attr("src", "newSource").stop().fadeT0(500, 1);
  }).mouseout(function(){
     $(this).attr("src", $(this).data("oldSrc")).stop().fadeTo(500, 0.5);
  });
});