JQuery: How do I use the JQuery delay with my own function?

Question

How do I use the JQuery delay in conjunction with my own defined function, pseudo-code like so?:

$('#foo').slideUp(300).delay(800).myOwnFunction(1,2,3);
function myOwnFunction (a,b,c) {...}

The code above doesn't work, however - per the JQuery documentation it appears like it should.

Answer 1

Use setTimeout() here. After the animation has finished sliding up, it will run the anonymous function that wraps the setTimeout() which calls your function after approx 800 milliseconds.

$('#foo').slideUp(300, function() {

    setTimeout(function() {

       myOwnFunction(1, 2, 3);

    }, 800);

});




function myOwnFunction(a, b, c) {
       alert(a + b + c);
   };

It doesn't matter that this was defined below as it's definition should be hoisted to the top.

Answer 2

$('#foo')
    .slideUp(300)
    .delay(800)
    .queue(function () {
        myOwnFunction(1,2,3);
        $(this).dequeue();
    });

See:

• http://api.jquery.com/queue/
• http://api.jquery.com/dequeue/