jQuery to change (with fade animation) background image of div on hover

Question

I am trying to change the background image of a div on hover with jQuery. This is what I came up so far, however, it\'s not working:

html

Answer 1

Try doing this:-

$('.logo').hover(
    function() {
        $(this).css("background-image",
                    "url(http://placehold.it/300x100/ffffff/000000.png&text=second)"); 
    },
    function() {
        $(this).css("background-image",
                    "url(http://placehold.it/300x100/ffffff/000000.png&text=first)"); 
    }
);

Answer 2

I saw someone saying you can't do it with jQuery, well here is my example and it works. $(".bannerImages img") is calling my image directly, so we can change its attribute using $(this). Once that's done you can call $(this) and change its attr, and also add an animation.

$(".bannerImages img").animate({opacity: 0}, 'slow', function() {
     $(this)
         .attr({'src': 'images/mainSlider/ps1.jpg'})
         .animate({opacity: 1});
});

Answer 3

You cannot animate non numerical properties with .animate()

Answer 4

DEMO

$('.logo').hover(

    function () {
        $(this).animate({
            opacity: 0
        }, 'fast', function () {
            $(this)
                .css({
                    'background-image': 'url(http://placehold.it/300x100/ffffff/000000.png&text=second)'
                })
                .animate({
                    opacity: 1
                });
        });
    },

    function () {
        $(this).animate({
            opacity: 0
        }, 'fast', function () {
            $(this)
                .css({
                    'background-image': 'url(http://placehold.it/300x100/ffffff/000000.png&text=first)'
                })
                .animate({
                    opacity: 1
                });
        });
});

Answer 5

You can't use jQuery's animate with images - it just doesn't work.

Use plain css, like this...

http://jsfiddle.net/26j6P/9/

Here's the css...

.logo {
    width: 300px;
    height: 100px;
    background: url('http://placehold.it/300x100/ffffff/000000.png&text=first') no-repeat center top;
    transition: 0.5s;
}
.logo:hover {
    background-image: url('http://placehold.it/300x100/ffffff/000000.png&text=second');
}

Answer 6

I know I'm a bit late. But if there's anyone who needs to do this, there's a jquery plugin for that. Go to the following link, scroll down to demos, and choose Using Backstretch as a slideshow. It works fine.

http://srobbin.com/jquery-plugins/backstretch/