Why does click event register immediately here?

Question

I am looking to animate something away and then click it. However, when I do the following it clicks the item immediately. Why is that? And how can I remedy that?

$('input[type="submit"]').hide('slow').show('slow').click();

Answer 1

Use the callback functionality.

$('input[type="submit"]').hide( "slow", function() {
  // Do whatever you want in the callback function, this will fire after the hide function finished.
  $(this).click();
});

Answer 2

If you want synchronous code to happen asynchronously as part of the animation queue, the best way is to use the .queue() method:

$('input[type="submit"]')
    .hide('slow')
    .show('slow')
    .queue(function (next) {
        $(this).click();
        next();
    });

Promises will work only so long as you don't queue more animations before the currently executing code has finished.

Complete callbacks are ok, so long as you don't need to perform more animations after. Otherwise, complete callbacks end up looking like arrow code:

$(...).hide('slow', function () {
    $(this).show('slow', function () {
        $(this).click();
    });
});

.queue() helps to flatten arrow code .