Delay of a few seconds before display:none [duplic

Question

This question already has an answer here:

• Hide div after a few seconds 8 answers

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(){
        $('#popUpBox').css({'display':'none'});

---

jQuery(function($) {

var $txt = '';

$('.selectiontext').bind("mouseup", function(e){
    if (window.getSelection){
        $txt = window.getSelection();
    }
    else if (document.getSelection){
        $txt = document.getSelection();
    }
    else if (document.selection){
        $txt = document.selection.createRange().text;
    }
    else return;
    if    ($txt!=''){
        $('#popUpBox').css({'display':'block', 'left':e.pageX+5+'px', 'top':e.pageY+0+'px'});
    }
});

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


});

Unfortunately, when i select text, now always #popUpBox disappears and i need only when selection is disabled

Answer 1

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.

Answer 2

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');

Answer 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);
    }
});