變化圖像和淡入懸停

Question

我有以下代碼：

$('div.test').hover(function() { 
    $(this).find('img').attr('src', 'img/personale/test2.png'); 
}, function() { 
    $(this).find('img').attr('src', 'img/personale/test.png'); 
}); 

而懸停改變形象我怎麼能添加淡入效果？

Answer 1

嘗試使用fadeIn()和fadeOut()：

$('div.test').hover(function() { 
 
    $(this).find('img').hide().attr('src', 'http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png').fadeIn(2000); 
 
}, function() { 
 
    $(this).find('img').fadeOut(2000,function(){ 
 
     $(this).attr('src','http://londontechnologyweek.co.uk/assets/uploads/2014/06/Stack-Overflow-Logo.png').fadeIn(); 
 
    }); 
 
});

.test{ 
 
    min-height:200px; 
 
    text-align:center; 
 
    border:1px solid; 
 
} 
 
.test img{ 
 
    width:100%; 
 
    height:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test"> 
 
    <img src="http://londontechnologyweek.co.uk/assets/uploads/2014/06/Stack-Overflow-Logo.png"/> 
 
</div>