我有5个按钮，当我通过指针或其中的一些按钮时，我想更改背景图像但具有淡入淡出效果。
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>
问题是更改图像时是如此之快，因为我要设置淡入淡出过渡，尝试缓慢放置淡入淡出，但由于使用“ body”作为选择器，所以消失了所有内容。
最佳答案
这是我制作的一个小模型。它只是一个基础，但应该易于修改。
http://jsfiddle.net/sB8hU/
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的：
$('.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);
});
}
});
关于javascript - 如何使用背景图像进行淡入淡出过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23016502/