javascript - 用效果改变属性

Question

我需要一种使用 attr 更改图像源的方法，它还会提供淡入淡出效果。我已经尝试了我在这里找到的其他答案之一，但没有达到预期的效果。

这是它目前的样子: http://jsfiddle.net/zeaVx/

您可以注意到整个画面是如何在拍摄另一张图片之前完全淡出的。这不是我需要的。我需要即时更改，就像 CSS 的 :hover 但只有淡入淡出的效果。

我怎样才能做到这一点？

Answer 1

创建 2 个独立的 </img>标签，将它们包裹在一个容器中，将一个放在另一个之上，然后简单地淡入/淡出顶部图像。

HTML

<div class="button-container">
    <img src="http://i.imgur.com/q4A2GtV.png" />
    <img src="http://i.imgur.com/jztqeIv.png" />
</div>

CSS

.button-container {
    position: relative;
}
.button-container img {
    position: absolute;
    left: 0;
    top: 0;
}

JQuery

$('.button-container').hover(function () {
    $(this).find('img:last-child').stop().fadeOut();
}, function () {
    $(this).find('img:last-child').stop().fadeIn();
});

演示:http://jsfiddle.net/zeaVx/1/