In JQuery, Is it possible to get callback function after setting new css rule?

Question

I have $(\'.element\').css(\"color\",\"yellow\") and I need that next event was only after this one, something looks like $(\'.element\').css(\"color\",\"

Answer 1

There's no callback for jquery css function. However, we can go around, it's not a good practice, but it works.

If you call it right after you make the change

$('.element').css('color','yellow');
alert('DONE');

If you want this function has only been called right after the change, make an interval loop.

$('.element').css('color','yellow');
    var detectChange = setInterval(function(){
    var myColor = $('.element').css('color');
    if (myColor == 'yellow') {
    alert('DONE');
    clearInterval(detectChange); //Stop the loop
}
},10);

To avoid an infinite loop, set a limit

var current = 0;
$('.element').css('color','yellow');
    current++;
    var detectChange = setInterval(function(){
    var myColor = $('.element').css('color');
    if (myColor == 'yellow' || current >= 100) {
      alert('DONE');
      clearInterval(detectChange); //Stop the loop
    }
},10);

Or using settimeout as mentioned above/

Answer 2

you can use promise

$('.element').css("color","yellow").promise().done(function(){
    alert( 'color is yellow!' );
});

http://codepen.io/onikiienko/pen/wBJyLP

Answer 3

Yes, it is possible. 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.

Answer 4

use jquery promise,

$('.element').css("color","yellow").promise().done(function(){alert(1)});

Answer 5

Callbacks are only necessary for asynchronous functions. The css function will always complete before code execution continues, so a callback is not required. In the code:

$('.element').css('color', 'yellow');
alert(1);

The color will be changed before the alert is fired. You can confirm this by running:

$('.element').css('color', 'yellow');
alert($('.element').css('color'));

In other words, if you wanted to use a callback, just execute it after the css function:

$('.element').css('color', 'yellow');
cb();

Answer 6

You can use setTimeout to increase the sleep time between the alert and the css like this:

function afterCss() {
    alert(1);
}

$('.element').css("color","yellow");
setTimeout(afterCss, 1000);

This will make the alert appear 1 second after the css changes were committed.

This answer is outdated, so you might want to use promises from ES6 like the answer above.

---

$('.element').css("color", "yellow").promise().done(function(){
    // The context here is done() and not $('.element'), 
    // be careful when using the "this" variable
    alert(1);
});