I was looking through some of the features offered by MooTools, and came across the Fx.Morph demo. I liked the look and feel of this and have seen it before in the past. However, in the past, I assumed it worked much like the common jQuery.animate(css,options) function. I actually looked at the demo and realized, it was morphing from one named style to another, without passing the actual style information into the ‘animation’, just the ‘morph to’ CSS class.
I did a bit of research, and found out that it’s pretty easy to retrieve the current stylesheets and CSS Rules in Firefox (Safari and Opera also support this, to my knowledge) and so, began to create a simple ‘jQuery.Morph‘ plugin for myself. I threw up a quick demo page, that is actually just a pseudo-recreation of the MooTools Fx.Morph demo (same Markup, same Style). You can compare the two and see some minor differences … namely the background color not fading in as smoothly as it does with MooTools.
I hope to be able to finish this up at some point and release it to the general public.
You can view the preview here:
UPDATE: I looked into the IE Support a bit more and figured out how to use document.styleSheets instead of the original method, and jquery.morph.js has been updated to reflect that. However, there seems to be a small bug in jQuery 1.2.3 (maybe not so small? :P) that is throwing errors in IE when you try to animate things like ‘color’ and ‘overflow’ (basically, anything that does not map back to a ‘unitable numeric’).
[js]fx.elem.style[ fx.prop ] = fx.now + fx.unit;[/js]
This is the offending code, in the _default for the step. I didn’t look through jQuery enough to figure it out (thousands of lines of code without a ‘goto definition’ isn’t fun to debug) but I believe this should be considered a bug … especially since the code does not validate either before calling this _default function or in the _default function. As it’s a “default” handler, it should assume all possible types of values and gracefully exit if it’s “no good”. Which, it appears to do in Firefox, but that could just be because Firefox ignores when you try to set a style to an invalid value, and IE is simply saying “Hey, dummy, you cant do that” (forgiveness is a nice thing, you know?).