Adding a fade in and out transition to background image on hover

I have a simple navigation system in a sidebar on a page that you can see here.

As you can see when you hover over one of the links in the sidebar the background image changes as I have set a different background URL for hover in the CSS. I am looking for a simple way of adding a transition effect, so that the hover background image fades in and out. I have tried a couple of jQuery methods without success. I am wonder开发者_开发百科ing if there is a way of adding a fade transition using jQuery or some other method to the background URL image, or whether I have to use a different method to get a transition effect.

Thanks,

Nick

It's difficult to say what you're trying to do without some clarification, or some example code, but are you looking for something like this?

$("#someElement").hover(function() {
    $(this).stop().fadeOut("1000", function() {
       $(this).attr("src", "anotherImage.png").fadeIn(1000);
    }); 
}, function() {
    $(this).stop().fadeOut("1000", function() {
       $(this).attr("src", "firstImage.png").fadeIn(1000);
    }); 
});

In this example, #someElement refers to an img element. The src attribute is changed on hover, with a fade effect.

Edit - having re-read your question, I think you want to change the background-image CSS property, rather than the src of an img element. If that's the case, have a look at this example. All that has really changed is replacing the jQuery attr function with css.

Use the following codes:

<div id="someElement" style="background:url('2.jpg');width:100px;height:100px;">
</div>
     $(document).ready(function(){ 
        $("#someElement").hover(function() {
            $(this).stop().fadeOut("1000", function() {
                $(this).css("background", "url('1.jpg')").fadeIn(1000);
            });
        }, function() {
            $(this).stop().fadeOut("1000", function() {
                $(this).css("background", "url('2.jpg')").fadeIn(1000);
            });
        });
    });

HTML

This is the HTML element which will have the image in its background:

<div class="image"></div>

CSS

We define two CSS classes. The default one for the element which contains image1.jpg and a second class which contains image2.jpg:

.image {
    width: 1000px; /* Image width */
    height: 500px; /* Image height */
    background: url('../images/image1.jpg') no-repeat; /* First image */
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "../images/image1.jpg", sizingMethod = 'scale');
    background-size: 100% 100%;
    background-position: center;
}
.image.image-2 {
    background: url('../images/image2.jpg') no-repeat;  /* Second image */
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "../images/image2.jpg", sizingMethod = 'scale');
    background-size: 100% 100%;
    background-position: center;
}

JavaScript

The JavaScript uses callbacks/promises to ensure each transition happens in the right sequence:

var elem = $('.image'); // Define the element
elem.hover(toggleImage); // When hovering over the element, run the toggleImage function

function toggleImage() {
    // Fade out 0.5 secs, toggle image class, fade in 0.5 secs
    elem.fadeOut(500, function(){
        elem.toggleClass('image-2').promise().done(function(){
            elem.fadeIn(500);
        });
    })
}