CODEWITHSUNDEEP
javascriptjquery
BobNoobGuy
BobNoobGuy

Reputation: 1645

Hidden div to show up for 3 seconds and close on click

I am looking for a jquery or javascript to do this:

On page load the div will be hidden then if I click a button the div will appear for 3 seconds and close

I found the example to auto hide a div after 3 seconds in this link http://papermashup.com/demos/jquery-divfade.html

and an example to show a div in this link http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show

How can I combine both example ? I need the div to be hidden on page load only when a button is clicked then the div will appear for 3 seconds

This is what I have so far. 

<script type="text/javascript">
$(document).ready(function(){
    setTimeout(function(){
        $("div.mydiv").fadeOut("slow", function () {
            $("div.mydiv").remove();
        });
    }, 2000);

    $("#btnAddRow").click(function () {
        $("div.mydiv").show();
    });
});
</script>

The time out to fade out is working. But I need to set the div hidden in the beginning. when I hide the div. The on click function does not seem to make it show up

the HTML 

<div class="mydiv"  style="visibility: hidden; ">test</div>

I tried this too:

<div class="mydiv"  style="display: none;">test</div>

Upvotes: 0

Views: 1635

Answers (2)

Rustam
Rustam

Reputation: 249

$("div.mydiv").remove();

change to:

$("div.mydiv").hide();

Upvotes: 2

hanleyhansen
hanleyhansen

Reputation: 6452

Try this:

HTML:

<div class="mydiv"  style="display: none;">test</div>

JS:

$("#btnAddRow").click(function () {
    $("div.mydiv").show().delay(2000).fadeOut();
});

Upvotes: 0

Related Questions