Jquery Modal Fade Delay

Question

I'm using jquery-reveal.js to have a pop up that fade away after clicking a link. What I would like to do now is have a delay from when the link is clicked to when the fade starts I have identified the piece of code that calls the fade but I can't get the delay to work. Where would I put the timeout in this?

if(options.animation == "fade") {
                modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
                modal.animate({
                    "opacity" : 0
                }, options.animationspeed, function() {
                    modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
                    unlockModal();
                });                 
            }   

Answer 1

modalBG.delay(3000)

会延迟3秒

Answer 2

In a generic way, to set a delay before any method call you can use standard JavaScript setTimeout method.

setTimeout(function()
{
    $('#MyModal').fadeOut();
}, 2000);

The code above will execute the call of jQuery's fadeOut, with a delay of 2 seconds.

Update

After taking a look in the jQuery Reveal's documentation, I guess that I figured out:

setTimeout(function()
{
    $('#MyModal').trigger('reveal:close');
}, 2000);

Also, it's important to remember that the Reveal is a jQuery plugin, that may not work with delay() , since it executes another operations which may not be in the effects queue, thus, they will not be delayed.

From jQuery API Documentation

It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue

And Also:

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.