Question

I am working on a project right now that uses an accordion style menu, but I think this is more of a general question reguarding IE8 and Jquery .animate(). For some reason, even though the animations seem like the are completed (tested with callback functions) what is showing on the screen is incomplete. It seems like it’s completing because whenever I use the browser zoom in and out, try highlighting the region, or other similar things to cause a change in appearence it corrects itself (ie the end result of the animation is shown). I have tested in the latest version of Chrome and the animation looks perfect, so it is an IE issue.

I am animating the property “margin-top” for the next element a certain distance when a element is clicked using .animate(), reveiling the submenu underneath. When a element is “opened” in this manner and another is clicked, a function is called to check all elements for being opened and closes the one that is using .animate() also.

I’ve only typed a description of the code because I feel like the is an issue with browser performance (possibly just on this machine?). Has anyone heard of this happening in IE8 or below in regaurds to the animations or just Jquery/Javascript and IE8 in general?

Answer 1

In IE8 I sometimes have to manually cause the parent element to reflow in order to get other elements to move correctly after an animation.

function repaint(jElement) {
    if (!$.browser.msie) return;
    for (var i = 0; i < jElement.length; i++) {
        jElement[i].className = jElement[i].className;
    }
}

Try running this function on the parent of the animated element after the animation is complete and see if it fixes the issue.