I simply try to show an hidden element for X seconds after I click on a button. I am able to make it appear, but not to let it dissapear again after X seconds have passed. I tried it with delay(X) but nothing happens.

$("#mybutton").on(
  "click",
  function() {
    $("#test").css("visibility", "visible");
    $("#test").delay(1000).css("visibility", "hidden");
  }
);

#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
  float: top;
}

<script src=".1.1/jquery.min.js"></script>
<img id="test" src=".jpg">

<div id="mybutton">
  Button
</div>

I simply try to show an hidden element for X seconds after I click on a button. I am able to make it appear, but not to let it dissapear again after X seconds have passed. I tried it with delay(X) but nothing happens.

$("#mybutton").on(
  "click",
  function() {
    $("#test").css("visibility", "visible");
    $("#test").delay(1000).css("visibility", "hidden");
  }
);

#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
  float: top;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">

<div id="mybutton">
  Button
</div>

JSFIDDLE: https://jsfiddle/75sttmxj/

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Mar 8, 2016 at 12:49 rrk 15.9k44 gold badges3030 silver badges4747 bronze badges asked Mar 8, 2016 at 12:48 BlackBlack 20.5k4646 gold badges188188 silver badges296296 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

Try to use setTimeout() at this context,

setTimeout(() => { $("#test").css("visibility", "hidden"); }, 1000 * 1000);

Since .delay() can delay the animation queue only.

DEMO

And if you don't want to use an arrow function to do that, then you could simply use normal anonymous function like below,

setTimeout(function(){ $("#test").css("visibility", "hidden"); }, 1000);

.delay()

The .delay() method allows us to delay the execution of functions that follow it in the queue. 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.

so you could use, for example fade:-

$("#mybutton").on("click", function() {
  $("#test").fadeIn().delay(1000).fadeOut();
});

#test {
  display: none;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="https://jsfiddle/img/logo.png">

<div id="mybutton">
  button
</div>

or create a custom queue:-

$("#mybutton").on("click", function() {
  $("#test").queue(function() {
      $(this).css("visibility", "visible").dequeue();
    })
    .delay(1000)
    .queue(function() {
      $(this).css("visibility", "hidden").dequeue();
    });
});

#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="test" src="https://jsfiddle/img/logo.png">

<div id="mybutton">
  button
</div>

Try animating the opacity:

$("#mybutton").on(
  "click",
  function() {
    $("#test").animate({
      "opacity": 1
    }).delay(1000).animate({
      opacity: 0
    });
  }
);

#test {
  opacity: 0;
}
#mybutton:hover {
  cursor: pointer;
}
#mybutton {
  border: 1px solid black;
  background-color: gray;
  float: top;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">

<div id="mybutton">
  Button
</div>

Same answer as above but then supported by all browsers

$("#mybutton").on
(
  "click",
  function()
  {
  	$("#test").css("visibility","visible");
        setTimeout(function () 
        {
            $("#test").css("visibility", "hidden");
        }, 1 * 1000);
  }
);

#test {
  visibility: hidden;
}
#mybutton:hover {
  cursor: pointer;
}

#mybutton {
  border: 1px solid black;
  background-color: gray;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="test" src="http://www.jqueryscript/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg">

<div id="mybutton">
    button
</div>

$(document).ready(function () {
    $("#mybutton").on( "click",  function() {
        console.log('---------');
        $("#test").css("visibility", "visible");
        setTimeout(function () {
   $("#test").css("visibility", "hidden");
        }, 1000);
       
      });
      });

 #test {
      visibility:hidden;
    }
    #mybutton:hover {
      cursor: pointer;
    }
    #mybutton {
      border: 1px solid black;
      background-color: gray;
      float: top;
    }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <img id="test" src="http://www.jqueryscript/images/Minimal-jQuery-Loading-Overlay-Spinner-Plugin-Easy-Overlay.jpg" />

    <div id="mybutton">
      Button
    </div>

try this code :

for more reference