jQuery dialog open and automatically close after 3 seconds

Question

I am trying to open a jQuery dialog with no buttons to display with some animations and then automatically stay there for like 3 seconds, then close. Here is a jsfiddle of what I think should work, but as you can see it just opens and closes without waitng the 3 seconds:

jsfiddle: http://jsfiddle.net/WrdM9/1/

Anyone know how to straighten this out? Thanks!

Answer 1

You should use setTimeout:

open: function(event, ui) {
    setTimeout(function(){
        $('#dialog').dialog('close');                
    }, 3000);
}

Here's the fiddle: http://jsfiddle.net/WrdM9/2/

Answer 2

Use the jQuery delay function e.g.

$( "#your-modal-id" ).slideDown( 300 ).delay( 800 ).slideUp( 400 );

Answer 3

If you also want to add some transitions I wouldn't recommend jQuery slideUp and slideDown animations. Those are slow since it uses CPU instead of GPU and the animations themselves don't feel totally right.

I would recommend Velocity.js instead. Remember to also add Velocity UI js. And you could do something like this:

$( "#your-modal-id" ).velocity('transition.slideUpBigOut', { delay: 3000 })