如何更改背景图像淡入淡出

我有下面的代码，我希望图像随淡入而改变，图像现在已被函数'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>

谢谢！

来源

2011-11-14 shay benily

如果我正确地理解了你，你可能会淡出背景，改变它，然后再次淡入？像这样：

function changeBg (color) { 
    $('#wrapper').fadeOut(1000,function(){ 
     $(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000); 
}); 
}

来源

2011-11-14 23:44:18 bozdoz

交叉衰落（淡出而淡入）通过具有语句线straigh而不是从previos动画内部功能jQuery中得以实现。

此外，我明白你想只是背景图像淡出和淡入淡出;而不是页面的实际内容。

为了实现这个目标，让你的背景图像的单独项目一共但主要div中你已经转到后台：

<div id='wrapper' style='position:relative' > <!-- must be relative --> 

<img id='bg1' src='initial.image' style='position:absolute; top:0; left:0; 
    width:100%; height:100%; opacity:0.2; display:none; ' /> 

<img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0; 
    width:100%; height:100%; opacity:0.2; display:none; ' /> 

</div> 

function changeBackground(which) { 
    $('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');  
    which = (which = 1) ? 2 : 1; 
    $('#bg'+which).attr('src','next-image.xxx').fadeIn('slow'); 
    setTimeout('changeBackground('+which+')',2000); 
}  

$(document).ready(function() { 
    $('#bg1').attr('src','image-name.xxx').fadeIn('slow'); 
    setTimeout('changeBackground(1)',2000); //every 2 seconds? 
    . ...... 
}); 

In case you have various images for the "slide show", you might want to add a random 
number generation for which picture to show next.

来源

2011-11-15 00:02:55

如何更改背景图像淡入淡出

回答

相关问题