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

[Barney Carroll]

Roger, thanks for the advice. I appreciate the amount of event handling 
for this kind of thing not to get out hand is complicated.

There is no sample page, really. I'm talking about any generic site – 
but want to make my <input>s and <a>s fade (I find that instantaneous 
hover effects don't stir enough to draw the eye properly) to different 
states. It might be that I'd have to duplicate the objects to do this. 
I'll probably succumb to mootools or jQuery and then track down 
documentation!


Regards,
Barney


Roger Roelofs wrote:
> 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
> 
> 
> _______________________________________________
> Javascript mailing list
> Javascript at lists.evolt.org
> http://lists.evolt.org/mailman/listinfo/javascript


-- 
Barney Carroll
Text Matters

Information design: we help explain things using
language | design | systems | process improvement
______________________________________________________
phone +44 (0)118 986 8313  email barney at textmatters.com
web http://www.textmatters.com