Web Tricks: Fade In/Fade Out Elements

Ever wish hipsters would just go away? It's as easy as a click.

"Pabst the Hipster" fades gracefully into nothingness, just like all hipsters will someday. How is it done?

The opacity of an HTML object can be changed with javascript using the opacity style. By default, objects are set to an opacity of 1 (100%):

style="opacity:1;"

For Internet Explorer we need to add an extra piece of code with the filter style. Setting an element's opacity with the filter style is achieved like this:

style="filter:alpha(opacity=100);"

With the filter style you must enter opacity as a percent instead of a decimal. So to achieve a cross-browser opacity setting for any given element, use both of the above styles in conjunction thusly:

style="opacity:1; filter:alpha(opacity=100);"

In javascript, an element's opacity can be set using the opacity object inside the style object:

<script type="text/javascript">
  element.style.opacity = 1;
  element.style.filter = 'alpha(opacity=100)';
</script>

An element's filter style is set in the same way. Once we have cross-browser solution for setting opacity, we can animate a smooth change of opacity using some javascript with the setTimeout() function. setTimeout() has two parameters. The first calls a function after the timer has waited for a designated length of time, and the second tells the timeout how long to wait (in milliseconds). Here's an example of what a simple element fade-out would look like:

<script type="text/javascript">
  element = document.getElementById('id');
  fade = function() {
    opacity = element.style.opacity;
    opacity = opacity-.01;
    element.style.opacity = opacity;
    element.style.filter = 'alpha(opacity='+opacity*100+')';
    if(opacity<=0) {return false;}
    setTimeout(fade);
  }
  fade();
</script>

Below is the full script that makes Pabst the Hispter disappear above. I works in exactly the same way, except that I've added some extra features to control the speed of the fade, allow for a script to be called when the fade is complete, and a little more automation.

I've also added some cross-browser compatibility code (to help Internet Explorer along.) The "Browser Detect" script is available from Quirksmode. Feel free to copy and paste the code in your editor of choice and play around with some of the extra parameters.

The entire script:

// FADE IN - OUT ELEMENT
// direction: 1 OR -1  ("1" for fade in; "-1" for fade out. If no value is specified,or if
"0" is entered, element will alternate between in and out.)
// speed: 1->100  ("1" is the slowest speed; "100" is the fastest. Default is "5".
Entering "0" sets to default.)
// hide: TRUE OR FALSE  (When fading out, if set to "TRUE", hides the element
after it has completely faded out. Defatul value is "FALSE".)
// show: ANY ELEMENT DISPLAY VALUE  (When fading in, sets the display
value of the element if it was previously "none".  Default is "block".)
// callback: ANY JAVASCRIPT CODE  (runs a script after completion.)

function fade(element,direction,speed,hide,show,callback) {
  opacity = element.style.opacity;
  if(opacity=='' | opacity==undefined && opacity!='0') {opacity=1;}  
  if(opacity>1) {opacity=1;}
  if(opacity<0) {opacity=0;}
  if(element.style.display=='none') {opacity=0;}
  element.style.opacity = opacity;
  element.style.filter = 'alpha(opacity='+opacity*100+')';
  if(!direction | direction==0) {
    if(opacity==0) {direction=1;}
    else {direction=-1;}
  }
  if(!show | show=='none') {show='block';}
  if(element.style.display=='none' && direction==1) {element.style.display=show;}
  if(!speed | speed==0) {speed=5;}
  increment = .01*speed*direction;
  animateFade = function() {
    opacity = eval(opacity+'+'+increment);
    if(opacity<=0) {opacity=0;}
    if(opacity>=1) {opacity=1;}
    element.style.opacity = opacity;
    element.style.filter = 'alpha(opacity='+opacity*100+')';
    if(opacity==0 | opacity==1) {
      if(opacity==0 && hide) {element.style.display='none';}
      if(callback) {callback();}
      return false;
    }
    setTimeout(animateFade);
  }
  animateFade();
}

Javascript Fade In/Out Elements

posted on 2010-02-27 in "Web tricks." - 0 comments

No Comments for "Web Tricks: Fade In/Fade Out Elements"

Add a comment

8-bit ringtones - 5 for free!

You don't have these yet! I made some 8-bit ringtones the other day. Thought it would be nice to have something unique on my cellphone, maybe you would too! I'm thinking about doing some more experimental ringtones - I'll get back to you on that one. For now, please enjoy these:

collect them all

-nick

posted on 2010-02-18 in "Ringtones." - 0 comments

No Comments for "8-bit ringtones - 5 for free!"

Add a comment

Attention Surplus Disorder

Bam! marks the beginning. Welcome to "Attention Surplus Disorder: self discovery through expression & life as art"

-nick

posted on 2010-02-17 in "Inauguration." - 2 comments

Comments for "Attention Surplus Disorder"

this is what a comment looks like. thought i'd christen this part for you bro. yer blog is rad, props.

posted by Pabst on 2010-02-19

Thanks.

posted by Nick on 2010-02-19