jquery show div and hide after 5 seconds

Question

I have ajax call to delete a post
on successfull delete i am getting 1
when I get 1 then I want to show a notification div
div is like this

<div style="
 display:inline-block;
 float:right;
 border:1px solid #060;
 background:#FFC;
 padding:10px 20px;
 box-shadow:2px 2px 4px #666;
 color:#060;
 font-weight:bold;
 display:none;
 " id="messageBox">
  post deleted successfully.
</div>

and my Jquery code is like this

$("#messageBox").hide().slideDown();
  setTimeout(function(){
      $("#messageBox").hide();        
  }, 3000);

when I delete a post it normally shows messageBox div and hides it after 3 seconds
but when I delete a post and again delete another post
the first notification is now not hidden yet and

$("#messageBox").hide().slideDown();

is called so it hides first message and show 2nd message

but it hides it soon, I think on completion of 3 seconds for 1st message

Answer 1

Try

var tId;

$("#messageBox").hide().slideDown();
clearTimeout(tId);
tId=setTimeout(function(){
  $("#messageBox").hide();        
}, 3000);