title: how to change the background images with fade
body: <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>