Strange Javascript Behavior IE8 with Jquery and Animations

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?

I noticed that if I use the step callback function for .animate() to call the repaint function below on the parent element, the animation finishes displaying correctly, rather than just calling it at the end of the animation which displays the correct result but does not finish the animation. — IErage
– IErage, Commented Mar 4, 2011 at 21:34

tster · Accepted Answer · 2011-03-04 20:47:18Z

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.

answered Mar 4, 2011 at 20:47

tster

18.3k6 gold badges57 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Strange Javascript Behavior IE8 with Jquery and Animations

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related