jQuery在悬停时改变(使用淡入淡出动画)div的背景图像

Question

我试图用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:http://jsfiddle.net/26j6P/1/

我究竟做错了什么？如果我为背景颜色设置动画,它就可以正常工作......

Answer 1

你不能使用jQuery的动画与图像 - 它只是不起作用.

使用普通的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');
}

Answer 2

您不能使用非数字属性设置动画 .animate()