jQuery改变（使用淡入淡出动画）背景图片的div悬停 [英] jQuery to change (with fade animation) background image of div on hover

问题描述

我想改变一个div的悬浮与jQuery的背景图片。
这是我到目前为止，但是它不工作：

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 此处： http://jsfiddle.net/26j6P/1/

我做错了什么？
如果我动画的背景颜色，它工作正常...

What am I doing wrong? If I animate the background color, it works just fine...

推荐答案

你不能使用jQuery的动画

You can't use jQuery's animate with images - it just doesn't work.

使用纯CSS，像这样...

Use plain css, like this...

a href =http://jsfiddle.net/26j6P/9/> http://jsfiddle.net/26j6P/9/

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

这篇关于jQuery改变（使用淡入淡出动画）背景图片的div悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！