On Nov 7, 2006, at 7:35 AM, Paul Bakaus wrote:

Hi guys,

as Rey proposed, I went on and created a first version of animateClass.
With animateClass, you can animate an element from one class to a new one. Let me provide you an example:

You have a form input with class "default". This class is defined in an external stylesheet.
Now on validation error you want the class to change to "error", also as defined in your stylesheet.
And you want it nicely animated.

Just go ahead and do: $("#myinput").animateClass("error", "default", duration);

For examples and the script, check out http://paul.jquery.com/plugins/animateClass/

Remember, this is a draft. It is nowhere nearly beta, because of the following issues:

1.) The performance is poor when dealing with borders and margins (don't know why?)
2.) Animating block elements with auto width is not possible
3.) It works in IE (7 at least), but somehow in the second example the border is not animated (This is probably because IE does not have default values for the border when it's not set.). You can override this by setting the border in the stylesheet at div.ex2-2 to border: 0px;
4) Animating colors is not yet implemented.
5) It's not yet a demo project because of the lack of documentation and tutorial.

I welcome any ideas of improvement!

This is very slick! Great work so far, Paul.

One tiny suggestion for the demo: rather than baking in the onclick handlers into the buttons, you could do toggle() inside document ready for each of them and have the class animate back to the original one on the second click, then back and forth, back and forth -- providing hours of amusement for people like me. :)

Karl

___________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com


_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Reply via email to