how to change the background images with fade
<p>I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.</p>

<p>how can I "merge" between the function that's changing the images and the function that in charge of  the fade.</p>

<p>thanks.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=7"&gt; 
&lt;title&gt;none&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="Css/design.css" &gt;
 &lt;script src="query-1.4.4.js" type="text/javascript"&gt;&lt;/script&gt; 
&lt;script type="text/javascript"&gt;
$(document).ready(function() 
{
    $(document).ready(function() ({$('').fadeIn(1000);  
});
&lt;/script&gt;
&lt;script language="JavaScript"&gt;
function changeBg (color) {
  document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="wrapper" class="wrapper"&gt;
     &lt;div class="logo"&gt;&lt;a href="http://mazonit.co.il/"&gt;&lt;img border="0" src="Images/logo.png" &gt;&lt;/a&gt;
     &lt;/div&gt;
        &lt;div class="menu"&gt;
            &lt;a href="#" id="arrowleft"&gt;&lt;img border="0" src="Images/arrowleft.png" &gt;&lt;/a&gt;
            &lt;img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black"&gt;
            &lt;img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue"&gt;
            &lt;img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia"&gt;
            &lt;img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown"&gt;
            &lt;img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange"&gt;
            &lt;img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red"&gt;
            &lt;img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey"&gt;
            &lt;img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white"&gt;
            &lt;a href="#" id="arrowright"&gt;&lt;img border="0" src="Images/arrowright.png" &gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Thanks!</p>
