AnimateOpacity function

Cross-browser transparency animation

[WesleyC]

Recently I've been working with some animation functions in javascript for a couple sites. Since I've come here many a time while researching problems and looking for news, I figured I'd pay a bit of that back. :)

This is a little function I wrote to animate transparency levels. It doesn't work on most mobile devices, though if keepBlock is false it should at least hide the target element if you animate tranparency to 0, or display it if you animate transparency to something other than 0.

I've tested it in Firefox 2.0, IE7, and the latest versions of Opera and Safari. It appears to work well in all, though Opera and Safari tend to make the animation a little jerkier.

Variables:
string element -- The ID of the element to animate
float start -- The starting level of the transparency (1 is fully opaque, 0 is fully transparent and will hide the content if keepBlock is false)
float end -- The ending level of the transparency
float length -- The length of time over which to animate the transparency
bool keepBlock -- Whether or not to keep the element displayed as a block when fully transparent (taking up space and triggering events normally, though invisible)
string endScript -- A bit of javascript to be eval'd when the function finishes. Called immediately if element is not valid.
float time -- Unused. Do not use this parameter, as it is meant for the function to pass itself the amount of time over which the animation is being performed.

Anyone have any ideas as to how to make it more robust or powerful? :)

var IsExplorer = (document.all)? true : false; 
var IsOpera = (IsExplorer && window.opera)? true : false; 
function AnimateOpacity(element, start, end, length, keepBlock, endScript, time) 
{ 
 if (!length) 
  length = 1; 
   
 if (!time) 
  time = length; 
  
 var el = document.getElementById(element); 
  
 if (el!= null && length > 0) 
 { 
  var pos = (end - start) * (length / time); 
   
  if (start < .01 &&!keepBlock) 
  { 
   el.style.display = "none"; 
   start = 0; 
  } 
  else 
   el.style.display = "block"; 
   
  if (Math.abs(pos) < .01) 
   start = end; 
   
  if (!IsExplorer ¦¦ IsOpera) 
   el.style.opacity = start; 
  else 
   el.style.filter = "alpha(opacity="+start*100+")"; 
   
  length -= .01; 
   
  start = end - pos; 
   
  var timeoutStr = "AnimateOpacity('"+element+"', "+start+", "+end+", "+length+", "+keepBlock+", "+endScript+", "+time+");"; 
   
  setTimeout(timeoutStr, 10); 
 } 
 else 
{ 
eval(endScript); 
  return false; 
} 
} 

Edit: Remember to replace ¦¦ characters, as WebmasterWorld breaks these!

[edited by: WesleyC at 8:58 pm (utc) on July 19, 2007]

[Fotiman]

Have you checked out the animation abilities of any of the popular frameworks, like the Yahoo UI Library [developer.yahoo.com] (YUI) or Scriptaculous [script.aculo.us]? The YUI animation library is very well documented and easy to use, supporting a bunch of animation effects (more than just opacity effects). It's good stuff... check it out. :-)

[WesleyC]

I just looked the YUI up--it looks very powerful to be sure, but my real goal here is to give people something simple so that they can see how it works--you'd have to dig pretty deeply into the YUI libraries, I'm betting, to find their opacity animation. :)

[DrDoc]

And, I can guarantee that the YUI is a tad heavier ;)

---

Thanks for contributing with that code, Wesley! I'm gonna have to try it out. :)

[edited by: DrDoc at 10:30 pm (utc) on July 19, 2007]