페이드와 함께 배경 이미지를 변경하는 방법

아래 코드가 있으며 이미지가 페이드로 변경되도록하려면 이미지가 '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

크로스 페이딩 (페이드 동안 페이드 아웃)이 문 previos 애니메이션에서 내부 기능을 줄 straigh 아닌 jQuery를 가짐으로써 달성된다.

또한 배경 이미지를 페이드 아웃하고 페이드 인하려는 것으로 알고 있습니다. 페이지의 실제 내용이 아닙니다.

는 그 달성 아예 배경 이미지 별도의 항목을하지만 주요 사업부의 내부는 백그라운드로 가지고 :

<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

페이드와 함께 배경 이미지를 변경하는 방법

답변

관련 문제