Javascript Tutorial - Simple Fade Animation

Hi there,

How would you make the box disappear after fading away? (eg. display = none)

Thanks

Dear Sir,

Thanks for the code. But what if I have a set of 5 or more text boxes and want them to appear one after another at an interval of say 20 seconds in a loop.

That is I do not want that the user should press the 'GO' button for the effect to take place, rather it should keep happening on the page automatically

Thanks in advance for the support.

Gr8 work there. but i noticed a bug in IE (counts for 7 and 6) if you remove the height specified as inline style on the faded element it stops the fade any idea why ?

This works great! I tried but couldn't find how to make it so that it will fade to a 50% opacity minimum... could you tell me what change to make because I couldn't figure it out. Thanks!

Thank you for this! It worked great for a prototype I was doing. I had to modify it as follows:

?1) starts invisible and fades up 2) fades up to .8 and back to 0 3) added switches for style.display (answers JaredC's initial request)

Note that in my case the initial css on the element also needs to be set appropriately. Here's my modified code:

var TimeToFade = 250.0;

function fade(eid)
{
  var element = document.getElementById(eid);
  if(element == null)
    return;

  if(element.FadeState == null)
  {
    if(element.style.opacity == null
        || element.style.opacity == ''
        || element.style.opacity == '0.8')
    {
      element.FadeState = -2;
    }
    else
    {
      element.FadeState = 2;
    }
  }

  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    element.style.display = element.FadeState == 2 
        ? 'none' : 'block';
    setTimeout("animateFade(" + new Date().getTime()
        + ",'" + eid + "')", 33);
  } 
}

function animateFade(lastTick, eid)
{ 
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;

  var element = document.getElementById(eid);

  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.display = element.FadeState == 1 
        ? 'block' : 'none';
    element.style.opacity = element.FadeState == 1 
        ? '.85' : '0';
    element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '85' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
  }

  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  newOpVal = newOpVal*0.85;
  element.style.opacity = newOpVal;
  element.style.filter =
      'alpha(opacity = ' + (newOpVal*100) + ')';

  setTimeout("animateFade(" + curTick
      + ",'" + eid + "')", 33);
}

#elementid {
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  display:none;
}

If I were to use this for production code, I might implement variables for the direction and min/max opacity.

Good site guys. I'll be back!

really its very good idea for using opacity ....

thanks my problem has solved

Hey, sweet little bit of code. I'm not a programmer by nature;rather a designer. My question is, is it possible to "inject" this code into Spry Sliding panels so they fade instead of sliding? Or, using them on their own, have the current visible block of info fade into the next block of info when a different button is clicked?

Thx in advance either way :P)

It was very handy, Thank you very much!

This is for line

setTimeout("animateFade(" + new Date().getTime() + ",’" + eid + "‘)", 33);

Can I do it without the new Date().getTime()? just manually giving the milliseconds and incrementing it? Thanks

Hey, I'm still messing around with the code, but is there a way to set it to 0 on start, then to 100?

I'm trying to set this as something that fades in on click, i have the CSS style set to "display:none" but that kills the whole thing... any ideas how to reverse it?

sorry if it is stated somewhere, i'll re-read this whole page once more also.

how can i use a image to fade out and another image to fade in after fadding out the first one on click a button

please advice Mohit

Lets say i want to fade from 40 to 100 and back to 40 ??

For those who want to remove the element after fading out, just use:

document.body.removeChild(element);

just before the return; in function "animateFade".

i first tried some stuff and changed the code by myself... then i saw that this was already disscussed and copyied it but it was exactly the opposit from what i wanted to get :D

i wanted to fade from 0 to 50 and then back to 0

but now i changed and changed things arround and it doesn't start at 50 it allways goes to full opacity on fadeout... this sucks :D can someone help me out with that problem??

here is the code i had...

function timmer (status) {
  document.getElementById("timmerhg").style.visibility =   
    status;
}

var TimeToFade = 1000.0;

function fade(status)
{
  var element = document.getElementById(status);
  if(element == null)
    return;

  if(element.FadeState == null)
  {
    if(element.style.opacity == null
        || element.style.opacity == '0.5'
    || element.style.opacity == '')
    {
      element.FadeState = -2;
    }
    else
    {
      element.FadeState = 2;
    }
  }

  if(element.FadeState == 0.5 || element.FadeState == -0.5)
  {
    element.FadeState = element.FadeState == 0.5 ? -0.5 : 0.5;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -0.5 : 0.5;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime()
        + ",'" + status + "')", 33);
  } 
}

function animateFade(lastTick, eid)
{ 
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;

  var element = document.getElementById(eid);

  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.opacity = element.FadeState == 0.5 
        ? '0.5' : '0';
    element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 0.5 ? '0.5' : '0') + ')';
    element.FadeState = element.FadeState == 0.5 ? 2 : -2;
    return;
  }

  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 0.5)
    newOpVal = 0.5 - newOpVal;

  element.style.opacity = newOpVal;
  element.style.filter =
      'alpha(opacity = ' + (newOpVal*50) + ')';

  setTimeout("animateFade(" + curTick
      + ",'" + status + "')", 33);
}

I would like to use an imagebutton instead of a normal button, but when I change attribute "type=input" to "type=image", the rectangle disappears and immediately appears.

hey guys, i tweaked the fading a bit. It will start Fading In, then Fading Out - the opposite. I know it was already explained at the top but my tiny little brain got confused and i wasted some time on it. I won't post it here because its a pain in the as* with the quotes and other characters. Here's the link instead. (hope the author dont mind).

Thanks again for all the help! The codes above really helped me :)

great!

so simple but powerful ... :)

Thnx

thank's

Do you know how to use multiple DIV ID's with different buttons/links? For example, I want to use 2 separate links that call this function, and when I click one link it makes one DIV transparent (invisible) before making the second opaque (visible).

Thank you so much for this amazing and useful script! I have just one question please: i have an invisible item ( image... ) and i want to apply the fade in when i make it visible... i'm not good in JS, how can i do that? Thanks a lot

Hi. What attribute can I change/add to delay the initial fade in? I want another action to finish before this one commences. Thanks in advance for any help given.

hi

Can someone post the code to fadeout also. The current code just fades in but not fadeout.

Thanks

Great code! I trying to modify the code so it starts 0% then fades in to 100%

Can someone assist me please.

solved it, Thanks anyway

again great code!

Hi, great code!!! Like "Tabrizz" said: How can you get this to hide the currently visible layer when opening a new one? That would be really useful.

Anyone?

HI nice script man! However, I am wondering how I can customize this like for example I have 3 hidden div's with contents and each has it's own link for toggling it's visibility, so clicking Link1 for example shows Div1 but hides Div2 and 3. Then clicking Link2 show Div2 but hides Div1 and Div3 so on. Of course the default visible is Div1 which the hiding and the showing is controlled by the fading script you have above...

I think this would be a nice application to it, appearing like a pseudo-AJAXy feel to content control...

This is a test

And here is the HTML for the javascript code above:

\ \ \ \ This is a test \ \ \ \ \

This is a great site I spent day's looking all over for this script and the edit(from Shaw) without success just a bunch of nonsense(although it did help my skills being new to JS) Thanks I'll be back

Thanks for the code, really liked the way you resolve it. I'm going to check the rest of the site...

BTW You should check the 'anti-SPAM' on Chrome, I think there something wrong...

Thanks for that nice code! I extended the code to specify min. and max. opacities and made it more compact by merging the two functions 'fade' and 'animateFade' to just one function again called 'fade'! Apart from that it behaves like the original code!

fadeTime = 500.0;

fadeMin = 0.0;
fadeMax = 1.0;

function fade(id, lastTick) {
    var tick = new Date().getTime();
    var element = document.getElementById(id);
    if (element.fadeState) {
        if (lastTick)
            element.fadeTime += tick-lastTick;
        else {
            element.fadeState = element.fadeState == 1 ? -1 : 1;
            element.fadeTime = fadeTime-element.fadeTime;
            return;
        }
    }
    else {
        element.fadeState = element.style.opacity == fadeMax ? -1 : 1;
        element.fadeTime = 0.0;
    }
    var opacity = element.fadeTime/fadeTime;
    if (element.fadeTime >= fadeTime)
        opacity = 1.0;
    if (element.fadeState == -1)
        opacity = 1.0-opacity;
    opacity = (fadeMax-fadeMin)*opacity+fadeMin;
    element.style.opacity = opacity;
    element.style.filter = 'alpha(opacity='+opacity*100+')';// IE
    if (element.fadeTime >= fadeTime)
        element.fadeState = null;
    else
        setTimeout("fade('"+id+"',"+tick+")", 33);
}

You have to call the function with just one argument, for example: [language] [/language]

Hi, there is nice code on this site.

I used the variant by earlt777@hotmail.com to install it with the 'onload' handler of the body tag.

This worked fine with Firefox/Opera, but it didn't work with IE8.

If I want to fade into a page with IE8, only the following header tags will have success:

Are there experiences to use some variant of the fading script here with body/onload on IE8?

In my last post I forgot the IE8 specific code, here it is:

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=4)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=3)">

I would really like this code to fade out the currently visible div on my page when i click any link on the navigation menu, and then load in its place the div containing the content of the clicked link (which should be hidden by default).

Any one got a tweak to make this happen?

Thanks in advance

Can anyone help me with a chat code?

Hello, can any buddy tell my how to get the fade block to be faded on page load?

Like a few folks have asked so far, does anyone know how to adapt this so that it can be used for multiple DIVs? That is, let's say you had a menu of several links, and for every link there was an associated DIV.

ie: When you click link 1, Div 1 would fade in. Then, when you click link 2, Div 1 would fade out and Div 2 would fade in.

That would be mega-useful and powerful to have. I've made a few stabs at it (I'm a total JS noob), but no luck yet.

Thoughts, ideas or suggestions anyone?

Thanks!

/this is seriously awesome code as it stands though! Thanks!

Hey thanks a lot for this code, its really good. I have somewhat blatantly ripped it off for my website :P so you are mentioned in the source. I edited it a little to make the fadeTime an extra parameter of the methods, so its set when called rather than being the same all the time, for every object.

to postage33 - this code is ideal for calling by other methods. For what you're talking about, I would make a method that calls fade on whatever div that corresponds to the link you clicked, and also calls fade on any divs that are not invisible. This should fade in the clicked div, while fading out any div that is visible, no matter if its fully faded in or not. If you only have one div visible at a time, you just need a variable to keep track of what div was last clicked, so the method knows which other div to call fade on.

Here is my version, i guess i fixe 2 bugs n°1 : fadeIn on an element which has " filter : alpha(opacity=0)" seems doesn't work

n°2 : fadeout on an element which contains elements which are on "position : absolute" seems doesn't work

function fadeElement(sElementId, fLastTick){
    var fFadeTime = 500.0;
    var fFadeMin = 0.0;
    var fFadeMax = 1.0;

    var eElement = document.getElementById(sElementId);
        if(!eElement)return;

    var fTick = new Date().getTime();   

    if(eElement.fadeState){
        if(fLastTick)eElement.fadeTime += fTick-fLastTick;
        else{
            eElement.fadeState = eElement.fadeState === 1 ? -1 : 1;
            eElement.fadeTime = fFadeTime-eElement.fadeTime;
            return true;
        }
    }
    else{
        if('undefined' !== typeof(eElement.style.opacity))eElement.fadeState = parseFloat(eElement.style.opacity) === fFadeMax ? -1 : 1;
        else{
            if('undefined' !== typeof(eElement.style.filter)){
                var iIeOpacity = parseFloat(eElement.style.filter.replace('alpha','').replace('opacity','').replace('=','').replace(')','').replace('(',''))/100;               
                eElement.fadeState = iIeOpacity === fFadeMax ? -1 : 1;
            }
            else return false;
        }
        eElement.fadeTime = 0.0;
    }
    var fOpacity = eElement.fadeTime/fFadeTime;
    if(eElement.fadeTime >= fFadeTime)fOpacity = 1.0;
    if(eElement.fadeState == -1)fOpacity = 1.0-fOpacity;
    fOpacity = (fFadeMax-fFadeMin)*fOpacity+fFadeMin;
    eElement.style.opacity = fOpacity;
    eElement.style.filter = 'alpha(opacity='+fOpacity*100+')';// IE
    if(eElement.children.length>0){
        for(var i=0; i<eElement.children.length;i++){
            eElement.children[i].style.filter = 'alpha(opacity='+fOpacity*100+')';// IE
        }       
    }
    if(eElement.fadeTime >= fFadeTime)eElement.fadeState = null;
    else setTimeout("fadeElement('"+eElement.id+"',"+fTick+")", 33);
}

Ps : sorry for my english... i'm french

Hi Brilliant code - thanks. Can anyone tell me how to modify it to fade only in one direction ie to make to separate functions, one for fade in, the other for fade out, which can be called independently.

I am a total newbie when it comes to JS so if someone could give me the code to make the animation not appear on start but fade to 100 once the button is clicked for the first time, that would be very helpful.

Nice script, I liked it.

I feel you guys can help me get out of the problems below. * element.fadeState, I was able to read and write values to this in firefox. But, it doesn't seem to work in IE.

* I wish to perform animation based on the element's current opacity to specified opacity. For this purpose I have to read the current opacity value, which is quite easy in all browsers except IE.

Thanks The Reddest for the quick response.

how to handle htmlelement.property? is there any other method to do it.

I am not a coder. I have read through and don't see what I am looking for. I have this java script (seen below) and would like to add the fade effect to it. Any suggestions on how to do that?

}
var n = 0;
timedelay = 5;
timedelay *= 1000;
//windowprops = "top=250,left=15,width=200,height=200";
windowprops = "toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes"
var imgs = new Array();
imgs[0] = "images/1.jpg";
imgs[1] = "images/2.jpg";
imgs[2] = "images/3.jpg";
var page = new Array();
page[0] = "";
page[1] = "";
page[2] = "";



function hook() {
var p = (n == 0) ? page[page.length-1] : page[n-1];
window.open(p,"",windowprops);
//document.location.href=p;
}
function rotate() {
document.picform.slideshow.src = imgs[n];
(n == (imgs.length - 1)) ? n = 0 : n++;
window.setTimeout("rotate()", timedelay);
}
function MM_swapImgRestore() { //v3.0  
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0  
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]

=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v3.0  
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!

x&&i<d.forms.length;i++) x=d.forms[i][n];for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_swapImage() { //v3.0  
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; 

x.src=a[i+2];}
}
window.onload = rotate;
//  End -->
//  End -->
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->


function Require(obForm,szFields)
    {
      var fields = szFields.split(",")
      var szMissing= new Array();
      for (x=0;x<fields.length;x++) {
        if (obForm.elements[fields[x]].value.length==0) {
           szMissing[szMissing.length]=new String(fields[x]);
        }
      }
      if (szMissing.length) {
        alert("All fields are required");
        return false
      }
      return true; -IE
    }


function changeText2(){
    var userInput = document.getElementById('hisname').value;
    document.getElementById('hisher').innerHTML = userInput;
    return true;
}

function changeText1(){
    var userInput = document.getElementById('urname').value;
    document.getElementById('urname2').innerHTML = userInput;
    document.getElementById('urname3').innerHTML = userInput;
    return true;
}


function changeText3(){
    var userInput = document.getElementById('greeting').value;
    document.getElementById('greeting2').innerHTML = userInput;
    return true;
}

There are two things I didn't like about the way you implemented this code: the fact you are storing a foreign attribute directly on the element and that you recurse using spliced-in variables. I wanted something more object-oriented without needing to install a framework.

But I otherwise thought the code had potential, so I'm offering my re-working back to everyone else. Note that the class-based approach also easily allows you to fade multiple elements at a time.

//declare our class so we can use the "new" keyword to create multiple instances
var animateFade = function(elmOrElmId, duration, state) {
    this.setOptions(elmOrElmId, duration, state);
};

//prototype its helper functions
animateFade.prototype = {

    setOptions: function(elmOrElmId, duration, state) {

        //set options
        this.fadeDuration = duration;
        this.element = (typeof elmOrElmId == 'string') ? document.getElementById(elmOrElmId) : elmOrElmId;
        this.fadeState = (state && state == 1) ? 1 : -1;//default -1 fade out, 1 fade in
        this.fadeTimeLeft = duration;//preset to passed duration, then overwrite
        this.lastTick = this.newTick();

        //start animation
        this.animate();
    },

    newTick: function() {
        return new Date().getTime();
    },

    returnElapsedTicks: function() {
        return this.currentTick - this.lastTick;
    },

    animate: function() {

        this.currentTick = this.newTick();

        var self = this;
        var elapsedTicks = this.returnElapsedTicks();

        //helper function, called in the timeout below, to recurse while maintaining correct reference of "this"
        var helper = function() {
            self.animate();
        };

        if (this.fadeTimeLeft <= elapsedTicks) {
            this.element.style.opacity = (this.fadeState == -1) ? 0 : 1;
            this.element.style.filter = 'alpha(opacity = ' + (this.fadeState == -1) ? 0 : 100 + ')';
            return;
        }

        this.fadeTimeLeft -= elapsedTicks;

        var newOptVal = this.fadeTimeLeft / this.fadeDuration;

        newOptVal = (this.fadeState == -1) ? newOptVal : (1 - newOptVal);

        this.element.style.opacity = newOptVal;
        this.element.style.filter = 'alpha(opacity = ' + (newOptVal * 100) + ')';

        this.lastTick = this.currentTick;
        this.currentTick = this.newTick();

        setTimeout(helper, 33);
    }
};

//initialize function
var init = function(elmsOrElmIdArr, duration) {
    for (var i = 0, l = elmsOrElmIdArr.length; i < l; i++) {
        //use "new" keyword to create separate instances
        new animateFade(elmsOrElmIdArr[i], duration);
    }
};

////////////////////
// USAGE EXAMPLES //
////////////////////

//pass in either id string or element reference

//Example A: fade just one element
var myOnlyElement = ['myUniqueId'];

//Example B: fade multiple elements
//var myMultElements = ['myId', document.getElementsByTagName('input')[7], 'my_other_id'];
var myMultElements = ['modal', 'popup'];

//how long fade should last
var myDuration = 1000;//1,000 milliseconds, or 1 second

//start fading
init(myMultElements, myDuration);

Forgot to demonstrate that you could set your single or multiple elements to fade in by passing a 1. (Only really need two states, and fade out is the default state.)

init(myMultElements, myDuration, 1);//fade in

Omit the 1, as in the very last example in my previous post, to fade out.

One last post with apologies: to make this work in IE, you will need to enclose the conditions in an extra set of parentheses.

If you prefer, just copy and paste. See where in my first post the comments indicate what the "helper" function does? Then see the "if" block immediately below that? Replace that "if" block with the following "if" (the top two lines inside the "if" statement contain the enclosing parentheses demanded by IE).

if (this.fadeTimeLeft <= elapsedTicks) {
                    this.element.style.opacity = ((this.fadeState == -1) ? 0 : 1);
                    this.element.style.filter = 'alpha(opacity = ' + ((this.fadeState == -1) ? 0 : 100) + ')';
                    return;
                }

Also, if you want to fade in (as per my second follow-up post), you'll need to add in "state" to your initializer function--I failed to add it to the initializer example. Just replace it with the following:

var init = function(elmsOrElmIdArr, duration, state) {
        for (var i = 0, l = elmsOrElmIdArr.length; i < l; i++) {
                //use "new" keyword to create separate instances
                new animateFade(elmsOrElmIdArr[i], duration, state);
        }
};

Last, just a thought. Someone posted an apparently asynchronous solution above that allowed multiple elements to both fade in and out at the same time. There is absolutely no reason in the world you could not set all three things asynchronously--the element, the duration, and its state of fading in or fading out--with this class-based method.

Here's an example--if you want to try this approach, this is the initializer method all over again, this time taking advantage of multiple arrays:

var init = function(elmsOrElmIdArr, duration, state) {
        for (var i = 0, l = elmsOrElmIdArr.length; i < l; i++) {
                //use "new" keyword to create separate instances
                new animateFade(elmsOrElmIdArr[i], duration[i], state[i]);
        }
};

///BASIC IDEA TO IMPLEMENT

//in the example below, each array is the same length:
//elm1 fades out in 1 second
//elm2 fades in in 3/10ths of second
//elm3 fades out in 7/10ths of a second
var myElms = [elm1, elm2, elm3];
var myDurations = [1000, 300, 700];
var myState = [-1, 1, -1];
init(myElms, myDurations, myState);

Anyway. :)

hi

i like to cover the contents of my page

the script works but the links dont work

how to fix?

chico.woelmuis.nl/erasure/erasure.htm

thnx

Great stuff.

Similar to what Vikas asked earlier and wasn't answered satisfactory yet, I have about 5 texts that should fade in and fade out one after another (in the same space) at an interval of about 20 seconds in a loop.

So there will be no buttons or mouse-actions that trigger anything, but it happens all by itself on the page.

Thanks.

How would I set the code so that the image starts off transparent and then becomes opaque after clicking a button?

Loving this code! But one snag for me--I want things to be invisible and then fade into view--I can do that by having the fade triggered by body onload, but this makes them appear briefly before fading out when the page loads. I rather these elements not be seen at all until they are triggered by the user.

I've read through the comments and codes above, and can't find any that really do the trick. How do I make these things stay hidden until triggered?

Here's my test page: http://ianmartinphotography.com/test-site/testimonials/prefade-test-01.html

Any help would be great!

Hi Great code..Thanks a lot! Can someone help on how i can fade out a link(or just text) for example and then at the same position fade in another link??

I don't usually comment on stuff on the internet. But I felt that this was worth it. THANK YOU SO MUCH FOR THIS!!!!!!!!!!!!!!!!!!!!!!!!!!

great script ! thank you

hello I have a tooltip script as follows:

var xOffset=6
var yOffset=15    

var affiche = false; // La variable i nous dit si le bloc est visible ou non
var w3c=document.getElementById && !document.all;
var ie=document.all;

if (ie||w3c) {
  var laBulle
}

function ietruebody(){  // retourne le bon corps...
  return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function deplacer(e) {
  if(affiche){
    var curX = (w3c) ? e.pageX : event.x + ietruebody().scrollLeft;
    var curY = (w3c) ? e.pageY : event.y + ietruebody().scrollTop;

    var winwidth = ie && !window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
    var winheight = ie && !window.opera ? ietruebody().clientHeight : window.innerHeight - 20;

    var rightedge = ie && !window.opera ? winwidth - event.clientX - xOffset : winwidth - e.clientX - xOffset;
    var bottomedge = ie && !window.opera ? winheight - event.clientY - yOffset : winheight - e.clientY - yOffset;

    var leftedge = (xOffset < 0) ? xOffset*(-1) : -1000

    // modifier la largeur de l'objet s'il est trop grand...
    if(laBulle.offsetWidth > winwidth / 3){
      laBulle.style.width = winwidth / 3
    }

    // si la largeur horizontale n'est pas assez grande pour l'info bulle
    if(rightedge < laBulle.offsetWidth){
      // bouge la position horizontale de sa largeur à gauche
    } else {
      if(curX < leftedge){
        laBulle.style.left = "5px"
      } else{
        // la position horizontale de la souris
        laBulle.style.left = curX + xOffset + "px"
      }
    }

    // même chose avec la verticale
    if(bottomedge < laBulle.offsetHeight){
      laBulle.style.top = curY - laBulle.offsetHeight - yOffset + "px"
    } else {
      laBulle.style.top = curY + yOffset + "px"
    }
  }
}
function montre(text) {
  if (w3c||ie){
    laBulle = document.all ? document.all["bulle"] : document.getElementById ? document.getElementById("bulle") : ""
    laBulle.innerHTML = text; // fixe le texte dans l'infobulle
    laBulle.style.visibility = "visible"; // Si il est cachée (la verif n'est qu'une securité) on le rend visible.
    affiche = true;
  }
}



function cache() {
  if (w3c||ie){
    affiche = false
    laBulle.style.visibility="hidden" // avoid the IE6 cache optimisation with hidden blocks
    laBulle.style.top = '-1000px'
    laBulle.style.backgroundColor = ''
    laBulle.style.width = ''
  }
}


document.onmousemove = deplacer; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.

I'm not very talented, so you will it be possible to add the code needed to include the "fade function and restored me entirely coded please

Thank you in advance Sincerely, William PS: sorry for the language but I'm French

Hi, I'm trying to get my main images to fade and be hyperlinked to specific pages. Could you help me? The page is: http://www.northland.edu/test

Thank you.

Great script. Thank you!

One issue I am having: in IE 7 & 8, the text in my DIV is coming out fuzzy. Perhaps it has something to do with this using filters, whereas the good browsers don't?

Have you ever seen or heard of this problem, and any idea how to fix it?

This is awesome! Thanks so much. This makes it so much easier for me.

Hi great code, i would just like it to fade in how do i modify the above code to make it only fade in.

Thanks

You guys rock - thanks for sharing the knowledge!! :D :D :D

Could someone please tell me how to add a close button to this? I am using this script on a CSS lightbox and have so far had no luck.

Thanks in advance.

fadeToggle p1 fadeToggle p2

This paragraph has a slow, linear fade.

This paragraph has a fast animation.

Thank you very much for the tutorial/explanation!

I've been trying to create one of those menus that are hidden outside of the screen and show just a little bit, and slide in when hovered. I've been having a tough time doing this, but with your time method it works just fine. My code is written in a clumsy way, so one shouldn't be scared of an occasional bug. Anyway, here's to see how useful this method can be:

var position = -2;
var fullTime = 2000;
var timeLeft = 0;
function showMenu() {
    if (position == -2) {
        position = 1;
        timeLeft = fullTime;
        setTimeout("moveMenu(" + new Date().getTime() + ")", 33);
    }
    if (position == -1) {
        position = 1;
        timeLeft = fullTime - timeLeft;
        setTimeout("moveMenu(" + new Date().getTime() + ")", 33);
    }
}
function hideMenu() {
    if (position == 2) {
        position = -1;
        timeLeft = fullTime;
        setTimeout("moveMenu(" + new Date().getTime() + ")", 33);
    }
    if (position == 1) {
        position = -1;
        timeLeft = fullTime - timeLeft;
        setTimeout("moveMenu(" + new Date().getTime() + ")", 33);
    }
}
function moveMenu(lastTick) {
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;
    var menu = document.getElementById('menu');
    if (timeLeft <= elapsedTicks) {
        if (position == 1) {
            menu.setAttribute('style','left :'+(5)+'px; top: 60px;'); 
            position = 2;
        }
        if (position == -1) {
            menu.setAttribute('style','left :'+(-130)+'px; top: 60px;');
            position = -2;
        }
        return;
    }
    timeLeft -= elapsedTicks;
    var value = timeLeft/fullTime*135;
    if (position == -1) value = -130 + value;
    if (position == 1) value = 5 - value;
    menu.setAttribute('style','left :'+value+'px; top: 60px;');
    setTimeout("moveMenu(" + new Date().getTime() + ")", 33);
}

I just set the showMenu() and hideMenu() functions in the onMouseOver and onMouseOut of the menu element.

Thanks again!

I used the example above and changed it to make one string of text disappear and another reappear when clicking on a button. This worked fine. But then I put a background image on the page and now when it fades in and out, it is choppy, there is no longer a smooth fade. Does anyone know why this should be so? Its not like I am reloading the background image with each fade which might cause an extra load on the system...

really great work.....

Hi there, have you ever try this in apex? =)

Thanks and Godspeed! shynn

Hi, just wanted to say thanks for the code. It's helped me out a lot and I only have one question. I'm new to Js and Html (self taught for the past 18 months) and I'm wondering is it possible to make it so it doesn't fade out completely. Say I wanted it to stop so it's only around 30 or 40 percent transparent, do I tell it that once it reaches a predefined value to stop or am I way off the mark???

Cheers for your help (& the code).

Guys with this code how can you just make it juast fade in and not fade out I mean the ID just keeps fading in when clicked ...

I would like to set a timeout that every 5 seconds a new image will fadein, when this image fadesout the same time a fadein will occur with the next image, is this possible??

Great script, solved all my problems, many thanks!

May I ask the whole code? :)

Really Impressive stuff. It took me awhil to understand as I have only begun to learn javascript about two weeks ago, but I have managed to pull alot out of this and am using it to create an image fader that is time based.

Sorry for the big post, but I'm having problems with this code that I based, loosely, off the ideas in this tutorial. It is supposed to be an image fader, that fades an image out, then fades the next one in. It doesn't seem to do anything, even though i have tried activating it in many ways.

var FadeTime = 500

    function imgchanger() 
    {
        var numOfFiles = 5
        var pic = Math.floor(Math.random()*numOfFiles);
        var picfile = "<img class=\"form\" id=\"changingpic"+pic+"\" src=\"images/Commercial/BCP_Local00"+pic+".jpg\" />"
        document.getElementById("picchanger").innerHTML = picfile
        var element.FadeTimeLeft = 0
        var t=setTimeout("imgfader(0," + pic + "," + new Date().getTime() + ")",25)
    }

    function imgfader(flip,eid,lastTick)  //flip=0 if fading in, flip=1 if fading out
    {
        var curTick = new Date().getTime()
        var elapsedTicks = curTick - lastTick
        var element = document.getElementById("changingpic"+eid)
        element.Fade = flip
        if(element.Fade == 1) //Fading in
            {
            element.FadeTimeLeft = element.FadeTimeLeft - elapsedTicks  
            element.style.opacity = element.FadeTimeLeft/FadeTime
            }
        else if(element.Fade == 0) //Fading out
            {
            element.FadeTimeLeft = element.FadeTimeLeft + elapsedTicks
            element.style.opacity = element.FadeTimeLeft/FadeTime
            }
        if(element.style.opacity = 0)  //finished fading out, start again.
            {
            var t=setTimeout("imgchanger()",0)
            }
        else if(element.style.opacity = 1)  //finished fading in, set timer until fade out
            {
            var t=setTimeout("imgtimer(" + eid + ")",5000)
            }
        else  //fading in or out currently, continue fading
            {
            var t=setTimeout("imgfader(" + flip + "," + eid + "," + new Date().getTime() + ")",25)
            {
    }

    function imgtimer(eid)
    {
    var t=setTimeout("imgfader(1," + eid + "," + new Date().getTime() + ")",25)
    }   

Thanks a lot! works perfectly!!

Hi.

I implemented this code to my page. I have some buttons such as "contact" "about us" etc. which I used this fade javascript on to make information appear fading up when I click on one of the buttons.

! My question is...

is there a way to make a automatic fade-out when I click another button...?

hellp thx for the nice code but i try to get the reverse state, that its starts hidden and if u press on the button it appears.

the code i found in the comments doesn´t work :/

have somebody an idea?

Thanks for this very useful and powerful tutorial. I would just like to add one thing I came across while modifying this code. I was trying to wrap the whole script in an anonymous function so I could have multiple objects fading on the page without the variables interfering with each other. When I did this, I was getting errors about undefined functions within setTimeout(). Here is an example of the original:

setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);

And here was my solution:

setTimeout(function(){animateFade(cur_tick,e_id);}, 33);

The issue was passing the animateFade function as a string to setTimeout. If setTimeout gets a string, it attempts to evaluate, instead of referencing the actual function. Why it works before wrapping this entire script in an anonymous function I'm not sure (perhaps something to do with function scope), but I thought I would pass along my fix if anyone else was running into this.

See this thread for more info:

http://stackoverflow.com/questions/1101668/how-to-use-settimeout-to-invoke-object-itself

This is just what I'm after - thanks!, just one thing though.. rather than a button, I'm trying to use expand and collapse images that replace each other when the text is displayed/hidden. Anyone any idea how to change the script to do that?

any reason you might be using this in 2012 instead of jquery, mootools, prototype and God knows what all ?

You learn more if you do it yourself, and you are more able to edit it to have exactly the behavior you want if you are using the effect within a larger script.

hi ! i hope u want to help me, i have a photo in the center of my web page, i want that effect in my photo for some kind of intro effect, please

This does work great for ids but is there anyway to set it to pull a class instead?

I am trying to have an image map that has multiple hover states and displays the contents of a div depending upon where you are on the map. I can get the function to display the contents of the div just fine but I want the div to fade in/out instead of just popping into existence. The function I am currently using uses the getElementById as well and I need the divs to have specific ids.

When I try to insert the [language]onMouseOver="fade(this.id);"[/language] on my image map link it just stops everything from working.

here is the code I'm working with: [language]

This is the seattle information and images

This is the new york information and images

This is some information and images/*this works perfectly fine*/

[/language]

javascript for hide function

var mapX = 0; var mapY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(mapEvent){ mapX = mapEvent.pageX; mapY = mapEvent.pageY;}
function UpdateCursorPositionDocAll(mapEvent){ mapX = event.clientX; mapY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
    rX = self.pageXOffset;
    rY = self.pageYOffset;
    }
else if(document.documentElement && document.documentElement.scrollTop) {
    rX = document.documentElement.scrollLeft;
    rY = document.documentElement.scrollTop;
    }
else if(document.body) {
    rX = document.body.scrollLeft;
    rY = document.body.scrollTop;
    }
if(document.all) {
    mapX += rX; 
    mapY += rY;
    }
d.style.left = (mapX+10) + "px";
d.style.top = (mapY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";

}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
//-->

Javascript for the fade function.

fadeTime = 500.0;

fadeMin = 0.0;
fadeMax = 1.0;

function fade(id, lastTick) {
        var tick = new Date().getTime();
        var element = document.getElementById(id);
        if (element.fadeState) {
                if (lastTick)
                        element.fadeTime += tick-lastTick;
                else {
                        element.fadeState = element.fadeState == 1 ? -1 : 1;
                        element.fadeTime = fadeTime-element.fadeTime;
                        return;
                }
        }
        else {
                element.fadeState = element.style.opacity == fadeMax ? -1 : 1;
                element.fadeTime = 0.0;
        }
        var opacity = element.fadeTime/fadeTime;
        if (element.fadeTime >= fadeTime)
                opacity = 1.0;
        if (element.fadeState == -1)
                opacity = 1.0-opacity;
        opacity = (fadeMax-fadeMin)*opacity+fadeMin;
        element.style.opacity = opacity;
        element.style.filter = 'alpha(opacity='+opacity*100+')';// IE
        if (element.fadeTime >= fadeTime)
                element.fadeState = null;
        else
                setTimeout("fade('"+id+"',"+tick+")", 33);
}

Thanks for any help you can provide.

Please help!

I would like to make a simple fading animation of gifs in CSS that then fades to the next page.

I would also like it to be compatible on iphones and ipads.

What is the code needed for this?

Thanks!