我有下面的代码，我想用淡入淡出来改变图像，现在图像被函数“changeBg”替换，但它们只是被替换而没有淡入淡出。
如何在更改图像的函数和负责淡入淡出的函数之间“合并”。
谢谢。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
<script src="query-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).ready(function() ({$('').fadeIn(1000);
});
</script>
<script language="JavaScript">
function changeBg (color) {
document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="logo"><a href="http://mazonit.co.il/"><img border="0" src="Images/logo.png" ></a>
</div>
<div class="menu">
<a href="#" id="arrowleft"><img border="0" src="Images/arrowleft.png" ></a>
<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
<a href="#" id="arrowright"><img border="0" src="Images/arrowright.png" ></a>
</div>
</body>
</html>
谢谢!
最佳答案
如果我理解正确的话，您也许可以淡出背景，更改它，然后再次淡入？像这样:
function changeBg (color) {
$('#wrapper').fadeOut(1000,function(){
$(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}
关于javascript - 如何使用淡入淡出更改背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8129716/