jquery - 需要简单的 jquery 淡入/淡出转换帮助

Question

使用jquery，我试图让背景图像在您将鼠标悬停在背景图像上时淡入不同的图像，并在您移开鼠标时淡出。在过去的几个小时里，我尝试了无数的解决方案，但似乎找不到一个适用的解决方案。下面是我的CSS

.thumbnail span {
    background: url('images/portfolio.png') no-repeat;
    width: 298px;
    height: 160px;
    position: absolute;
    top: 0;
    left: 0;
    margin-left:-2px;
    cursor: pointer;
}

.thumbnail span .rollover {
    background: url('images/portfolio_vignette.png') no-repeat;

}

这是我的 JavaScript:

<script type="text/javascript">         
$(document).ready(function(){

    $(".rollover").css({'opacity':'0'});

    $('.thumbnail span').hover(
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 1);
        },
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 0);
        }
    )

});     
</script>

干杯，伙计们!

Answer 1

确保在两个图像周围放置一个 div 包装器，并将悬停事件附加到其上。如果不这样做，当图像消失/出现时，您的悬停将不断触发。

在这里，我只是在悬停时淡出最后一个元素，在取消悬停时淡入。当然，您可以更具体，仅对 img 标签或特定 ID 进行操作。通用方法更有用，因为您不必为另一对图像再次编写代码。

HTML:

<div class="hoverfade">
    <img src="http://my/image1.jpg">
    <img src="http://my/image2.jpg">
</div>

jQuery:

$(".hoverfade").hover(function() {
    $(this).children().last().fadeOut(1000);
}, function() {
    $(this).children().last().fadeIn(500);
})

示例:http://jsfiddle.net/jtbowden/wQkWR/

使用带有背景图像的 div 的示例:http://jsfiddle.net/jtbowden/wQkWR/1/