将淡入淡出效果添加到鼠标悬停jQuery

Question

我是jQuery的新手，并尝试使用此代码在鼠标悬停时交换图像。

$("#Mr1").on({
 "mouseover" : function() {
    this.src = 'design/images/11.png';
  },
  "mouseout" : function() {
    this.src='design/images/10.png';
  }
});

代码工作得很好，但我想在图像交换时添加淡入淡出效果。我尝试在代码中添加部分以使其工作，但代码总是停止工作。有人可以帮我一把吗？

Answer 1

仅使用一个元素无法正确执行此操作，因为您一次只能重叠一个图像。

解决方案： LIVE DEMO

  <span class="fade">
    <img src="design/images/10.png">
    <img src="design/images/11.png">
  </span>

CSS：

.fade img{ position:absolute; }

JQ：

$('.fade').hover(function(){
  $('img:eq(1)', this).stop().fadeToggle(400);
});