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

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