使用 jQuery 动画背景图像更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2983957/
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
Animate background image change with jQuery
提问by Jonathan Lyon
I finally have this working now but would like to know how I can use JQuery's animate function to make the background image changes fade in nicely when you hover over the list items on the homepage:-
我现在终于有了这个工作，但想知道如何使用 JQuery 的 animate 函数使背景图像更改在您将鼠标悬停在主页上的列表项上时很好地淡入：-
http://www.thebalancedbody.ca/
http://www.thebalancedbody.ca/
The Code to make this happen so far is:-
到目前为止，实现这一目标的代码是：-
$("ul#frontpage li#277 a").hover(
function() {
$('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/nutrition_background.jpg)');
},
function() {
$('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg)');
}
);
$("ul#frontpage li#297 a").hover(
function() {
$('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/vibration_training.jpg)');
},
function() {
$('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg)');
}
);
etc etc
等等等等
How would I add the ANIMATE function to this please - thanks!!!
我将如何将 ANIMATE 功能添加到此 - 谢谢！！！
Thanks
谢谢
Jonathan
乔纳森
回答by Pekka
I don't think this can be done using jQuery's animatefunction because the background image does not have the necessary CSS properties to do such fading. jQuery can only utilize what the browser makes possible. (jQuery experts, correct me if I'm wrong of course.)
我不认为这可以使用 jQuery 的animate函数来完成，因为背景图像没有必要的 CSS 属性来进行这种淡化。jQuery 只能利用浏览器使之成为可能。（jQuery 专家，如果我错了，请纠正我。）
I guess you would have to work around this by not using genuine background-images, but divelements containing the image, positioned using position: absolute(or fixed) and z-indexfor stacking. You would then animate those divs.
我想你必须通过不使用真正的background-images来解决这个问题，而是使用div包含图像的元素，使用position: absolute（或fixed）定位并z-index用于堆叠。然后你将动画那些divs。
回答by James
building on XGreen's approach above, with a few tweaks you can have an animated looping background. See here for example:
建立在 XGreen 上面的方法的基础上，通过一些调整，您可以获得动画循环背景。例如，请参见此处：
$(document).ready(function(){
var images = Array("http://placekitten.com/500/200",
"http://placekitten.com/499/200",
"http://placekitten.com/501/200",
"http://placekitten.com/500/199");
var currimg = 0;
function loadimg(){
$('#background').animate({ opacity: 1 }, 500,function(){
//finished animating, minifade out and fade new back in
$('#background').animate({ opacity: 0.7 }, 100,function(){
currimg++;
if(currimg > images.length-1){
currimg=0;
}
var newimage = images[currimg];
//swap out bg src
$('#background').css("background-image", "url("+newimage+")");
//animate fully back in
$('#background').animate({ opacity: 1 }, 400,function(){
//set timer for next
setTimeout(loadimg,5000);
});
});
});
}
setTimeout(loadimg,5000);
});
回答by Ali Habibzadeh
<style type="text/css">
#homepage_outter { position:relative; width:100%; height:100%;}
#homepage_inner { position:absolute; top:0; left:0; z-index:10; width:100%; height:100%;}
#homepage_underlay { position:absolute; top:0; left:0; z-index:9; width:800px; height:500px; display:none;}
</style>
<script type="text/javascript">
$(function () {
$('a').hover(function () {
$('#homepage_underlay').fadeOut('slow', function () {
$('#homepage_underlay').css({ 'background-image': 'url("http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/nutrition_background.jpg")' });
$('#homepage_underlay').fadeIn('slow');
});
}, function () {
$('#homepage_underlay').fadeOut('slow', function () {
$('#homepage_underlay').css({ 'background-image': 'url("http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg")' });
$('#homepage_underlay').fadeIn('slow');
});
});
});
</script>
<body>
<div id="homepage_outter">
<div id="homepage_inner">
<a href="#" id="run">run</a>
</div>
<div id="homepage_underlay"></div>
</div>
回答by Brad Fletcher
I had the same problem, after loads of research and Googling, I found the following solution worked best for me! plenty of trial and error went into this one.
我遇到了同样的问题，经过大量研究和谷歌搜索，我发现以下解决方案最适合我！大量的试验和错误进入了这一过程。
--- SOLVED / SOLUTION ---
--- 已解决/解决方案 ---
JS
JS
$(document).ready(function() {
$("header").delay(5000).queue(function(){
$(this).css({"background-image":"url(<?php bloginfo('template_url') ?>/img/header-boy-hover.jpg)"});
});
});
CSS
CSS
header {
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
-ms-transition:all 1s ease-in;
transition:all 1s ease-in;
}
回答by Ali Naderi
It can be done by jquery and css. i did it in a way that can be used in dynamic situations , you just have to change background-image in jquery and it will do every thing , also you can change the time in css.
它可以通过 jquery 和 css 来完成。我以一种可以在动态情况下使用的方式做到了，您只需要在 jquery 中更改背景图像，它就会完成所有事情，您也可以在 css 中更改时间。
The fiddle : https://jsfiddle.net/Naderial/zohfvqz7/
小提琴：https: //jsfiddle.net/Naderial/zohfvqz7/
Html:
网址：
<div class="test">
CSS :
CSS :
.test {
/* as default, we set a background-image , but it is not nessesary */
background-image: url(http://lorempixel.com/400/200);
width: 200px;
height: 200px;
/* we set transition to 'all' properies - but you can use it just for background image either - by default the time is set to 1 second, you can change it yourself*/
transition: linear all 1s;
/* if you don't use delay , background will disapear and transition will start from a white background - you have to set the transition-delay the same as transition time OR more , so there won't be any problems */
-webkit-transition-delay: 1s;/* Safari */
transition-delay: 1s;
}
JS:
JS：
$('.test').click(function() {
//you can use all properties : background-color - background-image ...
$(this).css({
'background-image': 'url(http://lorempixel.com/400/200)'
});
});
回答by Daniel Canet
Have a look at this jQuery pluginfrom OvalPixels.
看看这个来自 OvalPixels 的jQuery 插件。
It may do the trick.
它可能会奏效。
回答by Jason
The simplest solution would be to wrap the element with a div. That wrapping div would have the hidden background image that would appear as the inner element fades.
最简单的解决方案是用 div 包裹元素。该包装 div 将具有隐藏的背景图像，该图像将随着内部元素的消失而出现。
Here's some example javascript:
下面是一些示例 javascript：
$('#wrapper').hover(function(event){
$('#inner').fadeOut(300);
}, function(event){
$('#inner').fadeIn(300);
});
and here's the html to go along with it:
这是与之配套的html：
<div id="wrapper"><div id="inner">Your inner text</div></div>
回答by tolkodelo
$('.clickable').hover(function(){
$('.selector').stop(true,true).fadeTo( 400 , 0.0, function() {
$('.selector').css('background-image',"url('assets/img/pic2.jpg')");
});
$('.selector').fadeTo( 400 , 1);
},
function(){
$('.selector').stop(false,true).fadeTo( 400 , 0.0, function() {
$('.selector').css('background-image',"url('assets/img/pic.jpg')");
});
$('.selector').fadeTo( 400 , 1);
}
);
回答by Milimetric
Ok, I figured it out, this is pretty simple with a little html trick:
好的，我想通了，这是一个非常简单的 html 技巧：
HTML
HTML
<body>
<div id="background">.
</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</body>?
javascript
javascript
$(document).ready(function(){
$('#background').animate({ opacity: 1 }, 3000);
});?
CSS
CSS
#background {
background-image: url("http://media.noupe.com//uploads/2009/10/wallpaper-pattern.jpg");
opacity: 0;
margin: 0;
padding: 0;
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
}?
