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()为非数字属性设置动画

Answer 3

DEMO

$('.logo').hover(

    function () {
        $(this).animate({
            opacity: 0
        }, 'fast', function () {
            $(this)
                .css({
                    'background-image': 'url(http://placehold.it/300x100/ffffff/000000.png&text=second)'
                })
                .animate({
                    opacity: 1
                });
        });
    },

    function () {
        $(this).animate({
            opacity: 0
        }, 'fast', function () {
            $(this)
                .css({
                    'background-image': 'url(http://placehold.it/300x100/ffffff/000000.png&text=first)'
                })
                .animate({
                    opacity: 1
                });
        });
});

Answer 4

我知道我有点晚了。 但如果有人需要这样做，那就有一个jquery插件。 转到以下链接，向下滚动到演示，然后选择使用Backstretch作为幻灯片。 它工作正常。

http://srobbin.com/jquery-plugins/backstretch/

Answer 5

试着这样做： -

$('.logo').hover(
    function() {
        $(this).css("background-image",
                    "url(http://placehold.it/300x100/ffffff/000000.png&text=second)"); 
    },
    function() {
        $(this).css("background-image",
                    "url(http://placehold.it/300x100/ffffff/000000.png&text=first)"); 
    }
);

Answer 6

我看到有人说你不能用jQuery做到这一点，这是我的例子，它的确有效。 $(".bannerImages img")直接调用我的图像，因此我们可以使用$(this)更改其属性。 一旦完成，您可以调用$(this)并更改其attr ，并添加动画。

$(".bannerImages img").animate({opacity: 0}, 'slow', function() {
     $(this)
         .attr({'src': 'images/mainSlider/ps1.jpg'})
         .animate({opacity: 1});
});