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

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