can't use it » css http://cantuse.it A blog about good and bad usability, user interface design, prototyping, web application development, computer science and everything else. Sun, 06 Mar 2011 00:27:51 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Quirky Proof of Concept: Automatic transition animation for CSS hovers (CSS transitions for older browsers) http://cantuse.it/2009/12/proof-of-concept-automatic-transition-animation-for-css-hovers-with-jquery/ http://cantuse.it/2009/12/proof-of-concept-automatic-transition-animation-for-css-hovers-with-jquery/#comments Mon, 14 Dec 2009 06:32:59 +0000 cemre http://www.cantuse.it/?p=287 I coded some javascript to emulate css transitions for older browsers. It works by parsing the CSS of the page, determining rules which also have a :hover state, then attaching itself to onmouseover/onmouseout events and animating according to the hovered definition in CSS.

Here’s the quirky proof of concept and you can read the source to look at the code as well. It’s quite a dirty solution:

  • IE has different ways of accessing the stylesheet, didn’t implement that
  • It’s probably very inefficient to iterate over all styles to get the hovered rules. Moreover, for each hovered rule, I search through the style rules again to find the un-hovered rule (O(n2) :)). Probably indexing all rules in a JS array would make things faster because of direct access? Another good idea if making the user provide all selectors which should be hover-animated.
  • It goes wonky if attributes that can’t be animated are defined (like font-family). I should probably make a list of all “animatable” attributes and only work on them.
  • It doesn’t account for default styles defined with a browser style-sheet (doesn’t restore them on mouseout)
  • For some reason margin-left and margin-right aren’t read in Firefox?

Anyway here’s the thing: Automatic transition animation for CSS hovers with jQuery.

]]> http://cantuse.it/2009/12/proof-of-concept-automatic-transition-animation-for-css-hovers-with-jquery/feed/ 1