title: javascript change image slowly with fade using timer and opacity
body: <p>i am looking for some help with this script i have been working on. here is my file fade.js
  the problem is with the changing, it is messed up. please help me find the problem and solution for this, thanks. </p>
  
  <p><strong>JS-file</strong></p>
  
  <pre><code>//image fade script
  var opacity = 0;
  function changeimg(currentimage){
  
  rnumb = Math.floor(Math.random()*2);
  var newimage = "./images/" + rnumb + ".jpg";
  if (newimage !== currentimage)
  {
  document.getElementById("fadeImg").src= newimage;
  }
  
  
  }
  function fadein()
  {
         var fadeImg = document.getElementById('fadeImg');
  
         var browserName=navigator.appName;
  
         if(browserName=="Microsoft Internet Explorer")
         {
  
                browserOpacity = opacity / 10;
  
                fadeImg.filters.alpha.opacity = browserOpacity;
  
         }
         else
         {
  
                browserOpacity = opacity / 1000;
  
                fadeImg.style.opacity = browserOpacity;
  
         }
  
         if(opacity &lt; 1000)
         {
  
                initiate();
  
         }
  else if(opacity == 1000)
  {
  changeimg(document.getElementById("fadeImg").src);
  opacity = 0;
  }
  
  }
  
  
  function initiate()
  {
  
         opacity++;
         setInterval("fadein()", 500);
  
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="fade.js"&gt;&lt;/script&gt;
  &lt;body onload="initiate()"&gt;
  &lt;img id="fadeImg" src="images/1.jpg" style="opacity:0.0; filter:alpha(opacity=0)"/&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JS-fiddle</strong></p>
  
  <p>Here is a Fiddle of the code as well: <a href="http://jsfiddle.net/epqKr/2/" rel="nofollow">http://jsfiddle.net/epqKr/2/</a> (Notice that the code, as it is in the fiddle, may make your browser freeze after a while.</p>