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

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

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
<div class="logo"></div>
css
.logo {
width: 300px;
height: 100px;
background:
url('http://placehold.it/300x100/ffffff/000000.png&text=first') no-repeat
center top;
}
js
$('.logo').hover(
function(){
$(this).animate({backgroundImage:
'http://placehold.it/300x100/ffffff/000000.png&text=second'},'fast');
},
function(){
$(this).animate({backgroundImage:
'http://placehold.it/300x100/ffffff/000000.png&text=first'},'fast');
});
jsfiddle here: http://jsfiddle.net/26j6P/1/
What am I doing wrong? If I animate the background color, it works just
fine...