Question

Am I able to, and if so how, delay the return of a Javascript function?

For example, say I use JS to set the background of an element that employs CSS3’s transitions, and that transition takes 1 second, I’d like to return the function after the transition has finished (after 1 second).

Something like this (pseudo code):

function
    element.style = 'background: #aaa; transition: all 1s ease-in;' // this will take 1 second to transition, although the JS is executed immediately

    after 1 second // delay the return until the CSS3 transition completes.
        return element

I hope this all makes sense! Thank you in advance, your help is much appreciated!

It might be helpful for everyone to see the actual code too: http://jsfiddle.net/BtNSs/1/

Answer 1

No, you’re not able to do this. In browsers, JavaScript and the UI share the same thread, so the animation will not begin until your JavaScript code finishes executing.

If you want to do something after the animation completes, use the transitionend event.