Delay Of A Few Seconds Before Display:none

I don't know how to achieve that display: none works not immediately. I need #popUpBox to disappear after a few seconds. $(document).bind('mousedown', function(){ $('#pop

Solution 1:

The following code will hide the div after 2 seconds

$("#popUpBox").delay(2000).hide();

If you want animation, you can use fadeOut method as well

$("#popUpBox").delay(2000).fadeOut('fast');

Solution 2:

Try to use the setTimeout function.

$(document).bind("mousedown", function(){
    setTimeout(function() {
        $('#popUpBox').css({'display':'none'});
    }, *time you want(int)*);
});

Edit : To your new question

Add a if statement when selection is disabled. Here :

$(document).bind("mousedown", function(){ 
    *if statement*
        setTimeout(function() { (...)

Because it's bound to the entire document, it will always hide the box without any condition.

Solution 3:

Try this if you want the function to trigger a few seconds after the mousedown event:

$(document).bind("mousedown", function(){
    setTimeout(function() {
        $('#popUpBox').css({'display':'none'});
    }, 5000);
});

Readup on setTimeout here and here. Basically, setTimeout() allows you to pass a function and then an interval (in milliseconds) to wait before executing that function.

Edit (for update): To only have this happen when there is no selection, try:

$(document).bind("mousedown", function(){
    if (!window.getSelection) {
        setTimeout(function() {
            $('#popUpBox').css({'display':'none'});
        }, 5000);
    }
});