Bootstrap Alert Auto Close
For a smooth slideup:
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){ $("#success-alert").slideUp(500);});$(document).ready(function() { $("#success-alert").hide(); $("#myWish").click(function showAlert() { $("#success-alert").fadeTo(2000, 500).slideUp(500, function() { $("#success-alert").slideUp(500); }); });});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><div class="product-options"> <a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a> <a href="" class="btn btn-mini"> Purchase </a></div><div class="alert alert-success" id="success-alert"> <button type="button" class="close" data-dismiss="alert">x</button> <strong>Success! </strong> Product have added to your wishlist.</div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Using a fadeTo() that is fading to an opacity of 500 in 2 seconds in "I Can Has Kittenz"'s code isn't readable to me. I think it's better using other options like a delay()
$(".alert").delay(4000).slideUp(200, function() { $(this).alert('close');});
Why all the other answers use slideUp is just beyond me. As I'm using the fade and in classes to have the alert fade away when closed (or after timeout), I don't want it to "slide up" and conflict with that.
Besides the slideUp method didn't even work. The alert itself didn't show at all. Here's what worked perfectly for me:
$(document).ready(function() { // show the alert setTimeout(function() { $(".alert").alert('close'); }, 2000);});