Question

I have some code that animates a <div>. When the animation is complete, several things need to happen (mostly manipulation of CSS on various elements), so I naturally put them callback provided by jQuery’s .animate();

It behaves as expected in Firefox. I can’t tell whether or not it’s an issue in IE because there are still some CSS issues preventing it from displaying properly there – I can’t tell if it’s the CSS or the same problem I’m having with Chrome. Regardless, for the moment, I’m focusing on Chrome.

One thing to note is that it doesn’t happen if I do a console.log right before the line that’s not being executed. Same if I insert a breakpoint and then let it continue.

        $sliders.animate($thisSlideConfig, 250, function() {

            $newPg.removeAttr('style');

            $curPg = $newPg;
            $curPgInf = plugin.getPgInf($curPg);
            plugin.setIndTxt();
            load2nav();
            plugin.adjustNavState();

            doCleanup();

        });

The line nor being run is $newPg.removeAttr('style');

It doesn’t seem to matter where in the block I put that line or how I select $newPg.

Oh yeah, I’m on Chrome 19.0.1084.52.

Answer 1

Removing the style attribute is unreliable. It may not trigger redrawing of the page (whereas a console log or a breakpoint force it to). Instead, try manually calling:

$newPg.style.XYZ = "";

For each style property you defined, if you can list them. If not, try this:

for( var x in $newPg.style) $newPg.style[x] = "";

These will trigger the correct redraw, and should hopefully stop the problem.