添加淡入淡出效果鼠標懸停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); 
});