hide a div and lable after 5 second using javascript/jquery function in c#

Question

Here is the div:

  <div class="alert alert-success alert-dismissable" runat="server" visible="false" id="lblmsgid">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
             <asp:Label runat="server" ID="lblmsg" Font-Bold="true" Visible="false"></asp:Label>
                  </div>

I want to hide the div after few second using client side code. Here i am using c# in backend.

  else if (e.CommandName.Equals("CategoryDelete"))
            {
                objCategory.CategoryDelete(Convert.ToInt32(e.CommandArgument));
                lblmsgid.Visible = true;
                lblmsg.Text = "Delete Successful..";
                BindCategory();
            }

After click on delete button from my grid i want to show a error message in the above lable(lable is in the div) and after few second i want to hide the div.. how can i do??

here is the button for activate:

 <asp:Button ID="btnActivate" runat="server" OnClick="BtnActivate_Click" CssClass="btn-active" Text="Activate Selected" OnClientClick="javascript:return TestCheckBox();" />

Answer 1

Simply use setTimeout . With plain js:

 setTimeout(function() { var alerts = document.getElementsByClassName("alert-dismissable"); for( var i = 0; i < alerts.length; i++ ) { alerts[i].style.display = "none"; } }, 2000); 

 <div class="alert alert-success alert-dismissable" runat="server" visible="false" id="lblmsgid"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <label runat="server" ID="lblmsg" Font-Bold="true" Visible="false">asd</label> </div> 

Or with jQuery:

 setTimeout(function() { $(".alert-dismissable").hide(); }, 2000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="alert alert-success alert-dismissable" runat="server" visible="false" id="lblmsgid"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <label runat="server" ID="lblmsg" Font-Bold="true" Visible="false">asd</label> </div> 

Answer 2

setTimeout(function() {
  $('.alert-dismissable').hide();
}, 3000);

Answer 3

$(document).ready(function() {
    setTimeout(function() {
        $('#lblmsgid').hide();
    }, 5 * 1000); //hides after 5 seconds
});