我需要一种使用attr更改图像来源的方法，这也会在此过程中提供淡入淡出效果。我尝试过我在这里找到的其他答案之一，但它没有达到预期的效果。
目前的情况如下： http://jsfiddle.net/zeaVx/
你可以注意到在拍摄另一张照片之前整个事情是如何彻底消失的。这不是我需要的。我需要改变是即时的，就像CSS的:hover一样，但只有褪色效果。
我怎样才能实现这个目标？
答案 0 :(得分：3)
创建2个单独的</img>标记，将它们包装在容器中，将其中一个放在另一个上面，然后简单地淡入/淡出顶部图像。
<div class="button-container">
<img src="http://i.imgur.com/q4A2GtV.png" />
<img src="http://i.imgur.com/jztqeIv.png" />
</div>
.button-container {
position: relative;
}
.button-container img {
position: absolute;
left: 0;
top: 0;
}
$('.button-container').hover(function () {
$(this).find('img:last-child').stop().fadeOut();
}, function () {
$(this).find('img:last-child').stop().fadeIn();
});
答案 1 :(得分：0)
使用此 jsfiddle.net/Curt/PLwam/1/ 它可能对您有所帮助。
答案 2 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var active = false;
$(function() {
$('#fb_icon')
.mouseover(function() {
if (!active) {
active = true;
$(this).hide();
$(this).attr('src', 'dummyImg2.jpg').fadeIn('slow');
active = false;
}
})
.mouseout(function() {
if (!active) {
active = true;
$(this).hide();
$(this).attr('src', 'dummyImg1.jpg').fadeIn('slow');
active = false;
}
});
});
});
</script>
</head>
<body>
<img src="dummyImg1.jpg" id="fb_icon" alt="">
</body>
</html>