I've got some putation that I want to execute after a CSS change is applied using jQuery's css function. Does this method wait until the CSS change is pletely applied, plete with the element being repainted?

I've got some putation that I want to execute after a CSS change is applied using jQuery's css function. Does this method wait until the CSS change is pletely applied, plete with the element being repainted?

• javascript
• jquery
• html
• dom

• 2 You don't really have much control over how that works. You can however apply the CSS changes and then schedule subsequent work in a timeout that happens shortly thereafter. – Pointy Commented Sep 4, 2013 at 21:06
• Have you seen stackoverflow./questions/7974761/…? – j08691 Commented Sep 4, 2013 at 21:07
• yes, as you can see here: james.padolsey./jquery/#v=1.10.2&fn=css – dcaswell Commented Sep 4, 2013 at 21:08

3 Answers 3

Modifying styles with JavaScript is a synchronous behavior. Updating classes, IDs, and inline styles of elements will immediately take effect on the element, and you can safely grab the new dimensions or styles of that element.

With that said, there are a few niche bugs in various browsers where repainting won't happen unless very specific style changes are made. Again, the recalculation of layout happens synchronously, but you may need to do additional work to force the repaint to happen.

The real answer to your question is no, it does not wait, even if it should, since the operation appears to be synchronous - code wise.

If you want to do something right after setting a css rule, you need to use the jQuery animate function with a duration of 0:

    $('#my-selector').animate({
        'my-css-property-name': 'my-css-property-value'
    }, {
        duration: 0,
        done: function(animation, jumpedToEnd) {
            // Your callback here
        }
    })

To know more about the done function parameters, check the documentation.

You'll see different behaviors in different browsers since jQuery is updating the markup with inline styles and the browser decides when to repaint. IE for example will appear to miss a lot of subsequent style change intervals - it seems to wait a tiny bit for things to settle down but I suspect this is just the nature of the rendering engine. Firefox and Chrome will update a bit more briskly.

Question: are you having trouble getting an animation to execute smoothly? Take a look at the step: event in animate.

I've used similar to what @bfavaretto suggests with setInterval and clearInterval to manage the individual frame tweening on animations for IE because of it's hesitancy to paint successive updates - esp with the likes of the jQuery UI progress bar.