javascript - 在鼠标悬停时淡入淡出图像...？

Question

我有以下 html 和 js。它从一个图像切换到另一个很好。但我希望图像淡入淡出(交叉淡入淡出？是这个词吗？)。我进行了搜索，但由于某种原因无法将其他淡入淡出方法应用到我的方法中。我怎样才能做到这一点？

<li class="item">
    <a href="/link.html" class="gallery-item">
        <span>
            <img src="/pic1-1.jpg" data-hover="pic1-2.jpg" width="243" height="243" />
        </span>
    </a>   
</li>

Javascript 下面

$(function () {
    $('.item img').each(function () {
        $(this).data('original', this.src)
    }).mouseenter(function () {
        $(this)
            .attr('src', $(this).data('hover'))
    }).mouseleave(function () {
        $(this)
            .attr('src', $(this).data('original'))
    })

})

这是一个 fiddle :http://jsfiddle.net/9qGtv/52/

谢谢!

Answer 1

http://jsfiddle.net/SuZQ8/

将您的 javascript 更改为此。如果您想让它们在没有停顿的情况下淡出，您将希望两个图像都出现在 DOM 中，因为您无法淡出源的切换；

$(function () {
    $('.item img').each(function () {
        $(this).data('original', this.src);
    }).mouseenter(function () {
        $(this).fadeOut(500, function(){
            $(this).attr('src', $(this).data('hover'));
            $(this).fadeIn(500);
        });
    }).mouseleave(function () {
        $(this).fadeOut(500, function(){
            $(this).attr('src', $(this).data('original'));
            $(this).fadeIn(500);
        });
    });
});