How to add fading effects in JavaScript

Question

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, how can I insert this in my demo 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<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);
}

Do you need to do this yourself? Because it could save you a lot of time if you would just use some framework like jQuery: api.jquery.com/fadeIn — Kevin
– Kevin, Commented May 2, 2011 at 12:08
@Garry Green: When I inserted the second script in my code, it didn't work. The code was also displayed on the site. — tintincutes
– tintincutes, Commented May 2, 2011 at 12:09
1)I don't get the question. What do you mean "where to insert it in the code"? 2)Passing a string to setTimeout causes it to eval it; you can pass parameters to the function 1. — Zirak
– Zirak, Commented May 2, 2011 at 12:09
@Kevin: I've heard that Jquery is great. But I don't have any background of this. THanks for the site, it looks helpful. I will read the info's then — tintincutes
– tintincutes, Commented May 2, 2011 at 12:11

maozet · Accepted Answer · 2011-05-02 12:12:36Z

1

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

answered May 2, 2011 at 12:12

maozet

961 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zirak Over a year ago

Maybe he doesn't want to use a library, but do it himself? DIY is a great way to learn stuff.

tintincutes Over a year ago

because I would like to do it personally and integrate on a website.

Louis Castro · Accepted Answer · 2014-12-24 11:19:04Z

0

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)



     }

answered Dec 24, 2014 at 11:19

Louis Castro

1042 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to add fading effects in JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related