title: How to add fading effects in JavaScript
body: <p>I have a JS code and would like to know how to add a fading effect. In the code I have 3 images. </p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript"&gt;
              var image1 = "pic001.png"
              var image2 = "pic002.png"
              var image3 = "pic006.png"
          &lt;/script&gt;
      &lt;/head&gt;
  
  
      &lt;!--&lt;body onLoad="slidit()"&gt;--&gt;
          &lt;body&gt;
          &lt;form name="images"&gt;
              &lt;!--&lt;img src="pic001.png" name="slide" width="200" height="200" /&gt; --&gt;
              &lt;img src="pic001.png" name="slide"  /&gt;
  
              &lt;script&gt;
  
                  //variable that will increment through the images
                  &lt;!--var step = 1
                  function slideit(){
                      //if browser does not support the image object, exit.
                      switch(step){
                          case 1:
                              document.images.slide.src = image1;
                              break;
                          case 2:
                              document.images.slide.src = image2;
                              break;
                          case 3:
                              document.images.slide.src = image3;
                              break;
                      }
                      if (step &lt; 3) {
                          step++
                      }
                      else {
                          step = 1
                      }
                      //call function "slideit()" every 3.5 seconds
                      setTimeout("slideit()", 3500)
                  }
  
                  slideit()
  
  
              &lt;/script&gt;
  
  
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the fading effect code, how can I insert this in my demo code?</p>
  
  <pre><code>function ChangeOpacity(id,msDuration,msStart,fromO,toO)
  {
    var element=document.getElementById(id);
    var opacity = element.style.opacity * 100;
    var msNow = (new Date()).getTime();
    opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
    if (opacity&lt;0) 
      SetOpacity(element,0)
    else if (opacity&gt;100)
      SetOpacity(element,100)
    else
    {
      SetOpacity(element,opacity);
      element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",1);
    }
  }
  function FadeIn(id)
  {
    var element=document.getElementById(id);
    if (element.timer) window.clearTimeout(element.timer); 
    var startMS = (new Date()).getTime();
    element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",0,100)",1);
  }
  function FadeOut(id)
  {
    var element=document.getElementById(id);
    if (element.timer) window.clearTimeout(element.timer); 
    var startMS = (new Date()).getTime();
    element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",100,0)",1);
  }
  function FadeInImage(foregroundID,newImage,backgroundID)
  {
    var foreground=document.getElementById(foregroundID);
    if (backgroundID)
    {
      var background=document.getElementById(backgroundID);
      if (background)
      {
        background.style.backgroundImage = 'url(' + foreground.src + ')';
        background.style.backgroundRepeat = 'no-repeat';
      }
    }
    SetOpacity(foreground,0);
    foreground.src = newImage;
    if (foreground.timer) window.clearTimeout(foreground.timer); 
    var startMS = (new Date()).getTime();
    foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "',1000," + startMS + ",0,100)",10);
  }
  </code></pre>