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

我可以想象jQuery将是实现这一点的库。我当然可以想出如何在mouseover上切换图像源，然后再切换回mouseout。但是，我如何通过图像的淡入淡出来实现这种效果呢

---

我已经尝试使用jQuery循环插件来实现这一点，但没有成功。我觉得也许有更简单的方法。非常感谢您的帮助，有什么想法吗？

在DIV中放置一个图像，并将DIV的背景设置为第一个图像。在DIV中放置一个image标记，并将SRC指向第二个映像

现在你可以摆弄IMG的不透明度，在不需要交换任何东西的情况下暴露其背后的背景图像

use.opacity（）

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

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

---

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

现在你可以摆弄IMG的不透明度，在不需要交换任何东西的情况下暴露其背后的背景图像

use.opacity（）

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

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

---

CSS3正在添加一系列转换属性来处理类似的事情，但目前如果您打算使用jQuery，您可以使用

.animate

功能，并结合

mouseenter

和

mouseleave

例如：

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

---

.stop

将清除上一个动画并使其完成，这样，如果用户将鼠标快速悬停在元素上几次，它就不会让动画在长队列中累积。

CSS3正在添加一系列转换属性来处理类似的事情，但目前，如果您打算使用jQuery，则可以使用

.animate

函数，并结合

mouseenter

和

mouseleave

例如：

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

.stop

将清除上一个动画并使其完成，这样，如果用户将鼠标快速悬停在元素上几次，它就不会让动画排成一个长队。

您可以尝试此方法

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

你可以试试这个

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

---

停止的原因是什么（对，对）？停下来就够了，好吗？我没有设置队列，也不需要走到最后。jQuery内部维护一个动画队列。停止在播放下一个动画之前清除它。停止的原因是什么（真，真）？停下来就够了，好吗？我没有设置队列，也不需要走到最后。jQuery内部维护一个动画队列。停止在播放下一个动画之前清除它。我两个都做了。。。我一直在等待堆栈溢出给我选择它作为正确答案的选项，对不起！我两个都做了。。。我一直在等待堆栈溢出给我选择它作为正确答案的选项，对不起！