Internet Explorer and jQuery animations

Internet Explorer 8 (and lower) doesn't fully support jQuery animations or, more specifically, some values used within the animate() method. For example, the show value is not fully supported when used together with the CSS display and visibility properties. IE will return an error saying that it was not able to get the value for the CSS property in question. Fortunately, there's a workaround. If your goal is to show an element and then animate it, you can still use the show() or fadeIn() methods combined with animate(). An example:

$('#test').show(300).animate({width: 300}, 300);

Alternatively, you can use the callback function of the aforementioned methods to attach an animation created with the animate() method:

$('#test').show(300, function() {
    $(this).animate({width: 300}, 300);

Always remember to test everything you code on IE.

Leave a Reply

Note: Only a member of this blog may post a comment.