[Javascript] Fade transition onmouseover/out based on CSS :hover?

[Roger Roelofs]

Barney,

On Sep 26, 2007, at 7:27 AM, Barney Carroll wrote:

> I've read my way through the most promising articles returned by  
> google,
> but everything I find is way too elaborate and bloated (and every  
> other
> javascript dilema floated on the internet seems to be asked and  
> answered
> in terms of jQuery terminology).
>
> I have numerous objects with completely satisfactory CSS hover rules,
> but I would like a gradual transition (for the state to fade in/out  
> over
> 300 millisecs or something) onmouseover and -out. I'm not looking for
> something to parse my CSS and translate the results, but the fact that
> the state change can be effected by CSS indicates how simple the  
> actual
> transition is – no content difference, basically.

A sample page would help us give more on-target advise.  First some  
questions.

1.  Can multiple animations be running simultaneously?
2.  If not, does the 2nd not fire if the first isn't finished, or  
what other behavior do you envision in this case?
3.  What 'fades'?  The background or foreground color?  a background  
or foreground image?

The short version is
1.  track the element(s) that are in process.
2.  if 1 or more, start a setTimeout/setInterval loop which loops  
through the elements
   a.  figure out what 'step' the element is at.
   b.  if it is the last one, remove it from the queue
   c.  else advance it to the next step
   d.  if the queue is empty, stop the setTimeout/setInverval loop

Generally I recommend using class names to set/track the sequence of  
steps in the animation for this kind of case.

People often recommend a js library for this kind of thing because it  
is a challenge to write well and 'interesting' to debug when it  
doesn't work as you expect.  It's a great learning exercise, but for  
a production site, I'd be more likely to use a library with a small  
footprint (like jQuery) because 9 times out of 10 I'll need other  
library functions for other parts of the page/site anyway.  I could  
create my own library, but it wouldn't be anywhere near as good or  
well tested as any major js library you could name.

Roger
--
Roger Roelofs                 web   www.datacompusa.com
Datacomp Appraisal Services   Email rer at datacompusa.com
3215 Eaglecrest Drive, NE
Grand Rapids, MI  49525-4593