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

将您的2张图片准确放在相同位置，然后使用javascript将顶部图像设置为淡出。这将产生你想要的效果

Answer 2

您可以访问缩略图类以执行淡入或淡出。

$（缩略图）.fadeIn（ '慢'）;

或

$（缩略图）.fadeIn（700）; // miliseconds

淡出做反向

$（缩略图）.fadeOut（ '快'）;

或

$（缩略图）.fadeOut（300）; // miliseconds

Answer 3

确保在两张图片周围放置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/

Answer 4

简化Jeff B的代码..

使用jQuery的fadeToggle来避免淡出和淡出的单独函数。

http://jsfiddle.net/danielredwood/wQkWR/2/

需要帮助简单的jquery fadein / out转换

4 个答案: