Bug in animateClass jquery extension

If you have tried to use the excellent animateClass extension to jquery maybe you have found that doesn't work in IE.

For example this sample code changes dynamically a h1 element from class "inicial" to class "final" producing a nice transition animation when you enter the page.


<script type="text/javascript">
$(document).ready(function()
{
$('#titolseccio').animateClass('final', 500);
});
</script>

With this release of animateClass (January 2007) this example only works in some browsers (particularly Firefox, the most popular in the developers community), but fails in Internet Explorer 6 and 7 (shamefully the most broadly used by the rest of the mortals (including customers))

You can solve this particular problem patching the animateClass.js

You have to download the uncompressed version of animateClass.js and look for a line like this:

if( typeof newStyle[n] != "function" && newStyle[n] /* No functions and null properties



and add this two conditions:

&& typeof newStyle[n] != "boolean" && typeof newStyle[n] != "number"


Resulting in this line:

if( typeof newStyle[n] != "function" && typeof newStyle[n] != "boolean" && typeof newStyle[n] != "number" && newStyle[n] /* No functions and null properties */


Now you can save your patched version of animateClass.js and reload your html page in Explorer (remember to Shift+Reload to avoid cached .js confusions)

The explanation of the problem is that javascript IE doesn't allow you to use string functions (like replace) on booleans and numbers, causing an unhandled exception.

Watch Out, this is not a generic patch, I'll warn the animateClass developer to patch it properly. For example, with this patch, you will not be able to animate any number CSS value (in the example the animation is from "20px" to "40px" the px makes it a string value, not a number).