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

我有下面的代碼，我希望圖像隨淡入而改變，圖像現在已被函數'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

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

回答

相關問題