jQuery 更改（使用淡入淡出动画）悬停时 div 的背景图像

我正在尝试使用 jQuery 更改悬停时 div 的背景图像。 这是我到目前为止所想到的，但是它不起作用：

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/

我究竟做错了什么？ 如果我对背景颜色进行动画处理，效果就很好......

您不能将 jQuery 的 animate 与图像一起使用 - 它根本不起作用。

使用纯CSS，像这样......

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

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