Question

我有下面的代码，我希望图像可以通过淡入淡出进行更改，现在图像已被“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>

谢谢！

Answer 1

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

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

Answer 2

在jQuery中实现交叉淡入淡出（淡出淡出时），使语句符合直线而不是来自previos动画的函数内部。

另外，我知道你只想要背景图像淡出和淡化;不是页面的实际内容。

要实现这一点，请将您的背景图片作为一个单独的项目，但在主要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.

如何用淡入淡出来改变背景图像

2 个答案: