Need help with simple jquery fadein/out transition

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

.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:

<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 gu开发者_开发技巧ys!

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.

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.

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);
})

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

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

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

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

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

or

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

to fadeout do the reverse

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

or

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

Simplifying Jeff B's code..

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

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