Even when I tried using alert.('close'), it wouldn't work for me.

However, I found a different solution that works perfectly! The alert message will fade away after 5 seconds, and once it's gone, the content beneath it will smoothly slide back to its original position.

setTimeout(() => {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);

Dealing with popping alerts and fading them was a challenge I encountered. After some research, I discovered a solution that worked for me. The key was to add and remove the 'in' class, which resolved the issue.

window.setTimeout(function() { // hide alert message
    $("#alert_message").removeClass('in'); 

}, 5000);

While attempting to use .remove() or .alert('close') methods, I faced a problem where the alert was completely removed from the document. This meant I couldn't reuse the same alert div without refreshing the page. With this new approach, the alert became reusable without any need for reloading. (I was utilizing aJax to submit a form and provide user feedback)

    $('#Some_Button_Or_Event_Here').click(function () { // Show alert message
        $('#alert_message').addClass('in'); 
    });

My approach to handling alerts in JavaScript involves creating a custom function that allows for displaying alerts multiple times without removing them from the DOM. This is particularly useful when posting data asynchronously with ajax and needing to show a message to the user after each post. The function I created takes parameters such as the container ID where the alert should be appended, the type of alert (e.g., 'success', 'danger'), and the actual message to display. Here's how it works:

function showAlert(containerId, alertType, message) {
    $("#" + containerId).append('<div class="alert alert-' + alertType + '" id="alert' + containerId + '">' + message + '</div>');
    $("#alert" + containerId).alert();
    window.setTimeout(function () { $("#alert" + containerId).alert('close'); }, 2000);
}

Here is the CoffeeScript rendition:

setTimeout ->
 $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000

I encountered a problem with the reusability of the alert in the solutions provided earlier, prompting me to come up with my own approach:

Upon page load

$("#success-alert").hide();

When it was time to show the alert

 $("#success-alert").show();
 window.setTimeout(function () {
     $("#success-alert").slideUp(500, function () {
          $("#success-alert").hide();
      });
 }, 5000);

It's worth noting that I decided to remove fadeTo from my solution because it set the opacity to 0, making the display none and the opacity 0.

After reviewing several answers both here and in another discussion, I came up with the following solution:

I devised a function called showAlert() that could dynamically insert an alert, complete with optional type and closeDelay. This way, you can easily add an alert of type danger (such as Bootstrap's alert-danger), which will automatically close after 5 seconds like this:

showAlert("Warning message", "danger", 5000);

To make this work, include the following JavaScript function:

function showAlert(message, type, closeDelay) {

    if ($("#alerts-container").length == 0) {
        // alerts-container is not present, so let's create it
        $("body")
            .append( $('<div id="alerts-container" style="position: fixed;
                width: 50%; left: 25%; top: 10%;">') );
    }

    // default to alert-info; other options are success, warning, danger
    type = type || "info";    

    // create the alert div
    var alert = $('<div class="alert alert-' + type + ' fade in">')
        .append(
            $('<button type="button" class="close" data-dismiss="alert">')
            .append("&times;")
        )
        .append(message);

    // add the alert div to the top of alerts-container using prepend(); to add at bottom use append()
    $("#alerts-container").prepend(alert);

    // if closeDelay was provided, set a timeout to close the alert
    if (closeDelay)
        window.setTimeout(function() { alert.alert("close") }, closeDelay);     
}

I was in need of a quick and easy solution to hide something after a certain amount of time, and I found a simple way to achieve this:

If you're working with Angular, you can use the following code snippet:

$timeout(self.hideError,2000);

When the timeout is up, the function below is called:

 self.hideError = function(){
   self.HasError = false;
   self.ErrorMessage = '';
};

Now, my dialog or UI can utilize these properties to hide elements as needed.

Experience the beauty of delay and fade:

setTimeout(function(){
    $(".notification").each(function(index){
        $(this).delay(300*index).fadeTo(2000,0).slideUp(600,function(){
            $(this).hide();
        });
    });
},2500);

give this a shot

$(document).ready(function () {

    setTimeout(function () {
        if ($(".message").is(":visible")){
            //you can include an animate.css class for a stylish fadeout effect
            $(".message").fadeOut("fast");
        }

    }, 3000)

});