how to add fading effects in javascript

StackOverflow https://stackoverflow.com/questions/5856927

  •  27-10-2019
  •  | 
  •  

Question

Hi I have a js code and would like to know how to add a fading effect. In the code I have 3 images.

Here is the code:

<html>
    <head>
        <script type="text/javascript">
            var image1 = "pic001.png"
            var image2 = "pic002.png"
            var image3 = "pic006.png"
        </script>
    </head>


    <!--<body onLoad="slidit()">-->
        <body>
        <form name="images">
            <!--<img src="pic001.png" name="slide" width="200" height="200" /> -->
            <img src="pic001.png" name="slide"  />

            <script>

                //variable that will increment through the images
                <!--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 < 3) {
                        step++
                    }
                    else {
                        step = 1
                    }
                    //call function "slideit()" every 3.5 seconds
                    setTimeout("slideit()", 3500)
                }

                slideit()


            </script>


        </form>
    </body>
</html>

This is the fading effect code, I'm not sure where to insert this in my demo code. Could you please help me? Thanks 

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<0) 
    SetOpacity(element,0)
  else if (opacity>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);
}
Was it helpful?

Solution

Why don't you use jQuery fadein/out..?

OTHER TIPS

You don't need to use that funtion, just pure CSS and Javascript

And remember to add style='transition:all 0.6s;'

function slideit(){

       if (!document.images)
          return


        document.getElementById('slide').style.opacity = "0";
        setTimeout(function(){
            document.getElementById('slide').src = slideimages[step].src;
            document.getElementById('slide').style.opacity = "1";
        },500)

            if (step<3)
             step++
             else
             step=1

             setTimeout(slideit,3500)



     }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top