jQuery Morph Preview

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?).

5 comments for “jQuery Morph Preview

  1. July 1, 2008 at 2:51 am


    I just spotted the Morph feature on MooTools too so looked for a jQuery version and came across your site. Have you updated it since writing this? It could be very useful!

  2. July 1, 2008 at 8:55 am

    No, I have not updated it since I last worked on it — I was trying to make it a direct port of the effects used with MooTools but ran into some difficulties as MooTools has stuff that jQuery does not … and to get the Morph to work ‘right’ I’d have to first port the effects, one by one … then chain them.

    It’s a “todo” item for me … but not a priority.

  3. Till
    December 20, 2008 at 9:15 am

    Hi, stumpled upon this blog while researching how to fade classes. Nice work!

    But as it seems to not updated for a while, here is a tip for anybody also seeking for this behaviour: There now is an effect in jQuery, doing a similar thing.


  4. December 20, 2008 at 10:24 am

    The examples in the jQuery Docs do not appear to show the ‘morphing’ capabilities of the transitions. Do you have any examples of this transition in action?

  5. Sarvesh
    March 3, 2009 at 5:59 pm

    There are some jQuery plugins that give mootool’s morph like functionality:

    check out: http://igorvieira.com/projects/animate-to-class/

    others at http://plugins.jquery.com

Leave a Reply