jQuery在悬停时更改（带有淡入淡出动画）div的背景图像答案

【问题标题】：jQuery to change (with fade animation) background image of div on hoverjQuery在悬停时更改（带有淡入淡出动画）div的背景图像
【发布时间】：2013-09-16 13:15:58
【问题描述】：

我正在尝试使用 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/

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

【问题讨论】：

jQuery 的动画不适用于图像。您需要使用 css 和转换才能使其正常工作。
看看这里stackoverflow.com/questions/4630947/…
如果你真的想使用 jQuery，最好只在 css 中悬停 .logo:hover {/*new img */}动画
感谢您的提醒。我从没想过 jQuery 的动画不适用于图像...

标签： jquery html css jquery-ui jquery-animate

【解决方案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');
}

【讨论】：

@TusharGupta 我没有拒绝你。但是，在检查了您的示例之后，这不是 OP 所要求的。
哦对不起，我还以为是你又对不起了:)
嗯，我又想多了 :) 谢谢@Archer。
这仅适用于 Chrome。背景图像动画未正式包含在 W3C 中。

【解决方案2】：

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

【讨论】：

感谢您的建设性回答。

【解决方案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
                });
        });
});

【讨论】：

这不是 animate 所做的（或者如果它适用于图像，它会做）。 OP 正在寻找一个背景图像淡入另一个，而不是先淡出。
没错。虽然 Tushar 的解决方案效果很好，但我不喜欢淡出/淡入，我更喜欢从一张图像淡入到另一张图像。

【解决方案4】：

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

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

【讨论】：

不错！感谢您的贡献。

【解决方案5】：

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

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

【讨论】：

两个问题：他想将一张图片淡入另一张图片，而且他有背景图片，而不是<img src="..."/>标签。

【解决方案6】：

尝试这样做：-

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

【讨论】：

这是有效的，但它没有褪色......我需要一些不那么激进的东西，有褪色......