jquery - 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

演示

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