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

Using jquery, I am trying to get a background image to fade into a different one when you mouse over it, and fade out when you take your mouse off. I have tried countless solutions over the last few hours, and can't seem to find one that applies. Below is my css

使用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;

}

and here is my JavaScript:

这是我的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>

Cheers guys!

干杯啦！

4 个解决方案

#1

Make sure to put a div wrapper around your two images and attach the hover event to that. If you don't, your hover will continuously trigger as the image disappears/appears.

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

Here, I simply fade the last element out when hovering, and in when un-hovering. Of course, you could be more specific and act on img tags only, or on specific ID's. The generic way is more useful as you never have to write the code again for another pair of images.

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

HTML:

HTML：

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

jQuery:

jQuery的：

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

Example: http://jsfiddle.net/jtbowden/wQkWR/

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

Example using divs with background images: http://jsfiddle.net/jtbowden/wQkWR/1/

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

#2

Put your 2 images exactly in the same position, then with javascript make the top image to fadeout. That will make the effect you want

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

#3

You can access the thumbnail class to perform fade in or out.

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

$(.thumbnail).fadeIn('slow');

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

要么

$(.thumbnail).fadeIn(700); // miliseconds

$（缩略图）.fadeIn（700）; //毫秒

to fadeout do the reverse

淡出做反过来

$(.thumbnail).fadeOut('fast');

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

要么

$(.thumbnail).fadeOut(300); // miliseconds

$（缩略图）.fadeOut（300）; //毫秒

#4

Simplifying Jeff B's code..

简化Jeff B的代码..

Use jQuery's fadeToggle to avoid separate functions for the fade out and in.

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

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

#1