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:

http://projects.zoulcreations.com/jquery/morph

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

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

Fun with jQuery

I was a bit bored this evening, and was speaking with one of my employers' web designers earlier about jQuery and some of the 'cool' things you can do with it. One of the more interesting things about jQuery, in my opinion, is the 'animate' function. Everything else is cool too, don't get me wrong ... "animate" is just one of the 'cooler' features, to me.

As I'm not a 'designer' or an 'animator', I've never really played with it too much, despite how much it's intrigued me all this time. So, with that, I decided to 'draft' a quirky little prototype of some jQuery animation magic ...

The idea is pretty simple, I have a single H1 tag in my BODY and in $(document).ready() I just grab the .text() and break it out into 'letter parts', hide the original H1 and then append the 'letter parts' into the DOM and run some animations on them ... all while, at the same time, running a generic 'move the box' animation-queue.

You can view this 'Fun with jQuery' demo here:

http://projects.zoulcreations.com/jquery/jquery.animate.html

http://projects.zoulcreations.com/jquery/jquery.slider.html

If you have any interesting ideas for jQuery animations, let me know ... I'd love to see how far this can go ...

UPDATE 2008-04-15: (Added 'jquery.slider.html' reference)