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

Question

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>

Answer 1

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

改成：

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

Answer 2

Try this:

HTML:

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

JS:

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