is there a way to make JQuery animation functions blocking

JQuery animation functions are non-blocking, but i’m looking for a way to make them blocking. For example i want something like this:

$("#btn").fadeOut(1000);
console.log("fadeOut() Completed..");

One solution I have found in other answers is to use callbacks, so this can be achieved using a callback function like this:

$("#btn").fadeOut(1000, function () {
    console.log("fadeOut() Completed..");
});

But i’m looking for a different solution (if possible) to make the call to fadeOut function blocking, i.e, when i call fadeOut(1000), the next line of code should not be executed until the fadeOut function is completed.

Answer

No, you can’t make the animation functions blocking.

You can use the callback method you’ve discovered.

If you’re in an environment where you can use async functions, it’s not awfully hard to promisify the callback, and then do something like await fadeOutP("#btn", 1000):

function fadeOutP(selector, time) {
  return new Promise(resolve => $(selector).fadeOut(time, resolve));
}
// buttons fade out in sequence:
async function thing() {
  await fadeOutP("#btn1", 1000);
  await fadeOutP("#btn2", 1000);
  await fadeOutP("#btn3", 1000);
}