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

Posted 2023-03-06

【中文标题】jQuery在悬停时更改（带有淡入淡出动画）div的背景图像

【英文标题】：jQuery to change (with fade animation) background image of div on hover

【发布时间】：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 和转换才能使其正常工作。

看看这里***.com/questions/4630947/…

如果你真的想使用 jQuery，最好只在 css 中悬停 .logo:hover /*new img */动画

感谢您的提醒。我从没想过 jQuery 的动画不适用于图像...

【参考方案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)"); 
    
);

【讨论】：

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