当使用javascript翻转图像时更改页面背景

Question

我目前正在使用JavaScript，但如果您有更好的解决方案，我全都是耳朵。所以我有我的包装和它的背景，其中包括我的所有内容，包括一个按钮，我想当悬停淡入淡出来改变包装/页面的背景。

我的CSS看起来像这样

#wrapper {position: absolute; min-width:550px; width:100%; height:100%; background: url(img/bg.jpg) no-repeat center top;} 

，然后我的HTML

<div id="wrapper"> 
<div id="content"> 
<div class="logo"> 
<img src="img/logo1.png" /> 
</div> 
<div class="button"> 
<img src="img/dj.png" onMouseOver="changeBgImage('img/bg2.jpg','wrapper')" onMouseOver="changeBgImage('img/bg2.jpg','wrapper')"/> 
</div> 
</div> 
</div> 

，然后我的javascript

<script type="text/javascript"> 
    function changeBgImage (image, id) { 
var element = document.getElementById(id); 
element.style.backgroundImage = "url("+image+")"; 
    } 
</script> 

所以因为它位于它的工作原理，它改变了背景和然后在mouseout上改回它，但是我希望它淡入淡出。我将如何去做这个？

编辑：尝试这两种解决方案下面，既不似乎工作或申请

Answer 1

我喜欢你的解决方案。 Check this out为您正试图完成的衰落效果的选项。

祝你好运！

编辑：https://stackoverflow.com/a/1055432/752527也似乎是一个很好的干净的解决方案。

Answer 2

这是一个很好的，干净的方式来做到这一点。

http://jsfiddle.net/Diodeus/gYyBL/

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg"> 

$('body').find('*[hoverImg]').each(function(index){ 
    $this = $(this) 
    $this.wrap('<div>')  
    $this.parent().css('width',$this.width()) 
    $this.parent().css('height',$this.width()) 
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")") 
     $this.hover(function() { 
      $(this).stop() 
      $(this).fadeTo('',.01)  
     },function() { 
      $(this).stop() 
      $(this).fadeTo('',1)    
     })      
});