jQuery 在悬停时更改（带有淡入淡出动画）div 的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18759402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery to change (with fade animation) background image of div on hover
提问by Iulian Dita
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:
我正在尝试使用 jQuery 更改悬停时 div 的背景图像。这是我到目前为止想到的，但是，它不起作用：
html
html
<div class="logo"></div>
css
css
.logo {
width: 300px;
height: 100px;
background: url('http://placehold.it/300x100/ffffff/000000.png&text=first') no-repeat center top;
}
js
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');
});
jsfiddlehere: http://jsfiddle.net/26j6P/1/
jsfiddle在这里：http: //jsfiddle.net/26j6P/1/
What am I doing wrong? If I animate the background color, it works just fine...
我究竟做错了什么？如果我为背景颜色设置动画，它就可以正常工作......
回答by Reinstate Monica Cellio
You can't use jQuery's animate with images - it just doesn't work.
您不能将 jQuery 的动画与图像一起使用 - 它不起作用。
Use plain css, like this...
使用普通的 css，就像这样......
Here's the css...
这是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');
}
回答by DGS
You cannot animate non numerical properties with .animate()
您不能为非数字属性设置动画 .animate()
回答by Tushar Gupta - curioustushar
$('.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
});
});
});
回答by Aneeez
I know I'm a bit late. But if there's anyone who needs to do this, there's a jquery plugin for that. Go to the following link, scroll down to demos, and choose Using Backstretch as a slideshow. It works fine.
我知道我有点晚了。但是，如果有人需要这样做，则可以使用 jquery 插件。转到以下链接，向下滚动到演示，然后选择将 Backstretch 用作幻灯片。它工作正常。
回答by Marcos V DeSousa
I saw someone saying you can't do it with jQuery, well here is my example and it works. $(".bannerImages img")is calling my image directly, so we can change its attribute using $(this). Once that's done you can call $(this)and change its attr, and also add an animation.
我看到有人说你不能用jQuery，这是我的例子，它有效。$(".bannerImages img")直接调用我的图像，因此我们可以使用$(this). 完成后，您可以调用$(this)并更改它的attr，还可以添加动画。
$(".bannerImages img").animate({opacity: 0}, 'slow', function() {
$(this)
.attr({'src': 'images/mainSlider/ps1.jpg'})
.animate({opacity: 1});
});
回答by Sujata Chanda
Try doing this:-
尝试这样做：-
$('.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)");
}
);
