javascript 如何使用背景图像进行淡入淡出过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23016502/
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
How can I make a fade transition with the background images
提问by Adh761
I have 5 buttons and when i pass my pointer o some of then, i want change the background image but with a fade effect.
我有 5 个按钮，当我将指针传递给其中一些按钮时，我想更改背景图像但具有淡入淡出效果。
HTML:
HTML：
<body>
<div id="content" class="row">
<div class="large-4 center columns ">
<a id="column1" class="button expand" href="http://www.page1.com">WEB 1</a>
</div>
<div class="large-4 center columns">
<a id="column2" class="button expand" href="http://www.page2.com">WEB 2</a>
</div>
<div class="large-4 center columns">
<a id="columna3" class="button expand" href="http://www.page3.com">WEB 3</a>
</div>
<div class="large-4 large-offset-2 center columns">
<a id="columna4" class="button expand" href="http://www.page4.com">WEB 4</a>
</div>
<div class="large-4 center columns end">
<a id="columna5" class="button expand" href="http://www.page5.com">WEB 5</a>
</div>
</div>
</body>
Jquery:
查询：
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
$("#column1").mouseover(function(){
$("body").css('background-image', 'url("img/dib1.jpg")');
});
$("#column2").mouseover(function(){
$("body").css('background-image', 'url("img/dib2.jpg")');
});
$("#column3").mouseover(function(){
$("body").css('background-image', 'url("img/dib3.jpg")');
});
$("#columna4").mouseover(function(){
$("body").css('background-image', 'url("img/dib4.jpeg")');
});
$("#column5").mouseover(function(){
$("body").css('background-image', 'url("img/dib5.jpg")');
});
</script>
The problem is when change the image, is so quickly, for that i want put a fade transition, tried put fadetoggle slow, but disappear all my content because use "body" for my selector.
问题是当更改图像时，速度如此之快，为此我想放置淡入淡出过渡，尝试将淡入淡出缓慢放置，但由于我的选择器使用“主体”而消失了我的所有内容。
采纳答案by wrxsti
Here is a little mock up I made. Its just a basis, but should be easily modifiable.
这是我制作的一个小模型。它只是一个基础，但应该很容易修改。
HTML:
HTML：
<div id="content" class="row">
<div class="large-4 center columns ">
<a id="column1" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page1.com">WEB 1</a>
</div>
<div class="large-4 center columns">
<a id="column2" class="button expand" data-bg="http://www.psdgraphics.com/file/abstract-background.jpg" href="http://www.page2.com">WEB 2</a>
</div>
<div class="large-4 center columns">
<a id="columna3" class="button expand" data-bg="http://wallpapergrab.com/wp-content/uploads/2014/03/start-3d-background-wallpapers.jpg" href="http://www.page3.com">WEB 3</a>
</div>
<div class="large-4 large-offset-2 center columns">
<a id="columna4" class="button expand" data-bg="http://sciencelakes.com/data_images/out/26/8856597-daisies-green-background.jpg" href="http://www.page4.com">WEB 4</a>
</div>
<div class="large-4 center columns end">
<a id="columna5" class="button expand" data-bg="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg" href="http://www.page5.com">WEB 5</a>
</div>
</div>
<div class="bg1"></div>
<div class="bg2"></div>
jQuery:
jQuery：
$('.bg1, .bg2').height( $(window).height() );
$('.button').hover(function(){
var bgImage = $(this).data('bg');
if( $('.bg1').is(':visible') ){
$('.bg2').css('background-image', 'url(' + bgImage + ')');
$('.bg1').fadeOut(200, function(){
$('.bg2').fadeIn(200);
});
} else {
$('.bg1').css('background-image', 'url(' + bgImage + ')');
$('.bg2').fadeOut(200, function(){
$('.bg1').fadeIn(200);
});
}
});
回答by experimenter
You can use CSS 3 transition property. Define class in your style sheet for example as follows:
您可以使用 CSS 3 过渡属性。例如，在样式表中定义类，如下所示：
.backgroundChanged
{
background-image: your image;
transition-property:background-image;
transition-duration: 0.3s;
transition-timing-function: linear;
}
And then apply this class programmatically in javascript when you need. Hope this helps.
然后在需要时以编程方式在 javascript 中应用此类。希望这可以帮助。
回答by mehulmpt
Use a absolute element and add background to it. Do it like this:
使用绝对元素并为其添加背景。像这样做：
<body>
<div id="bg"></div>
And styles:
和风格：
#bg {
position: fixed;
background: url(xyz.com);
width: 100%;
height: 100%;
top:0;
left:0;
z-index:-1; /* to place it behind body elements */
}
And follow your same trick. :D
并遵循您的相同技巧。:D
回答by MaKR
CSS3 is the easiest way. You just have to reassign the image in JavaScript as you already have, then putting this in the body tag will take care of the rest for you. Be sure to play with the timing to meet your needs. Disclaimer: this transition doesn't work in IE earlier than 10.
CSS3 是最简单的方法。你只需要像你已经拥有的那样在 JavaScript 中重新分配图像，然后把它放在 body 标签中将为你处理剩下的事情。一定要把握好时机以满足您的需求。免责声明：此转换在 10 之前的 IE 中不起作用。
body {
transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-webkit-transition: background .5s ease-in-out;
}
回答by Samuel Bolduc
Unfortunately, this is not currently possible with "simple" CSS.
不幸的是，这在“简单”的 CSS 中目前是不可能的。
However, you could use a container (your web page) with position: relativeand place your main divin it, with position: absoluteand top: 0; left: 0. then add, at the same level as this div:
但是，您可以使用一个容器（您的网页）position: relative并将您的主要内容div放在其中，使用position: absolute和top: 0; left: 0。然后在与此相同的级别添加div：
<img src="img/dib1.jpg" class="bg-img active" />
<img src="img/dib2.jpg" class="bg-img" />
<img src="img/dib3.jpg" class="bg-img" />
<img src="img/dib4.jpg" class="bg-img" />
<img src="img/dib5.jpg" class="bg-img" />
In your CSS :
在你的 CSS 中：
img.bg-img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 500ms ease-out; /* could be another duration / transition effect */
-webkit-transition: opacity 500ms ease-out;
-moz-transition: opacity 500ms ease-out;
-ms-transition: opacity 500ms ease-out;
-o-transition: opacity 500ms ease-out;
}
img.bg-img.active {
opacity: 1;
}
Then in your code, instead of changing the background-image property of "body", change the class of the desired images et add / remove active.
然后在您的代码中，而不是更改“body”的 background-image 属性，而是更改所需图像的类 et add / remove active。
