[jquery] Can Twitter Bootstrap alerts fade in as well as out?

When I first saw the alerts in Bootstrap I thought they would behave like the modal window does, dropping down or fading in, and then fading out when closed. But it seems like they are always visible. I guess I could have them sit in a layer above my app and manage showing them but I was wondering if the functionality was built in?

thanks!

Edit, what I have so far:

<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

Of course, Yes. Use this simple file in your project: https://gist.github.com/3851727

First add you HTML like this:

<div id="messagebox" class="alert hide"></div>

and then use:

$("#messagebox").message({text: "Hello world!", type: "error"});

You can pass all bootstrap alert types such as error, success and warning to type property as options.

The thing I use is this:

In your template an alert area

<div id="alert-area"></div>

Then an jQuery function for showing an alert

function newAlert (type, message) {
    $("#alert-area").append($("<div class='alert-message " + type + " fade in' data-alert><p> " + message + " </p></div>"));
    $(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); });
}
newAlert('success', 'Oh yeah!');

I don't agree with the way that Bootstrap uses fade in (as seen in their documentation - http://v4-alpha.getbootstrap.com/components/alerts/), and my suggestion is to avoid the class names fade and in, and to avoid that pattern in general (which is currently seen in the top-rated answer to this question).

(1) The semantics are wrong - transitions are temporary, but the class names live on. So why should we name our classes fade and fade in? It should be faded and faded-in, so that when developers read the markup, it's clear that those elements were faded or faded-in. The Bootstrap team has already done away with hide for hidden, why is fade any different?

(2) Using 2 classes fade and in for a single transition pollutes the class space. And, it's not clear that fade and in are associated with one another. The in class looks like a completely independent class, like alert and alert-success.

The best solution is to use faded when the element has been faded out, and to replace that class with faded-in when the element has been faded in.

Alert Faded

So to answer the question. I think the alert markup, style, and logic should be written in the following manner. Note: Feel free to replace the jQuery logic, if you're using vanilla javascript.

HTML

<div id="saveAlert" class="alert alert-success">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

CSS

.faded {
  opacity: 0;
  transition: opacity 1s;
}

JQuery

$('#saveAlert .close').on('click', function () {

  $("#saveAlert")
    .addClass('faded');

});

I got this way to close fading my Alert after 3 seconds. Hope it will be useful.

    setTimeout(function(){
    $('.alert').fadeTo("slow", 0.1, function(){
        $('.alert').alert('close')
    });     
    }, 3000)

You can fade-in a box using jquery. Use bootstraps built in 'hide' class to effectively set display:none on the div element:

<div id="saveAlert" class="alert alert-success hide" data-alert="alert" style="top:0">
            <a class="close" href="#">×</a>
            <p><strong>Well done!</strong> You successfully read this alert message.</p>
        </div>

and then use the fadeIn function in jquery, like so:

$("#saveAlert").fadeIn();

There are also specify a duration for the fadeIn function, e.g: $("#saveAlert").fadeIn(400);

Full details on using the fadeIn function can be found on the official jQuery documentation site: http://api.jquery.com/fadeIn/

Just a sidenote as well, if you arent using jquery, you can either add the 'hide' class to your own CSS file, or just add this to your div:

 <div style="display:none;" id="saveAlert">

Your div will then basically be set to hidden as default, and then jQuery will perform the fadeIn action, forcing the div to be displayed.

None of the current answers worked for me. I'm using Bootstrap 3.

I liked what Rob Vermeer was doing and started from his response.

For a fade in and then fade out effect, I just used wrote the following function and used jQuery:

Html on my page to add the alert(s) to:

        <div class="alert-messages text-center">
        </div>

Javascript function to show and dismiss the alert.

function showAndDismissAlert(type, message) {
    var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';

    // Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top.
    $(".alert-messages").prepend(htmlAlert);

    // Since we are prepending, take the first alert and tell it to fade in and then fade out.
    // Note: if we were appending, then should use last() instead of first()
    $(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); });
}

Then, to show and dismiss the alert, just call the function like this:

    showAndDismissAlert('success', 'Saved Successfully!');
    showAndDismissAlert('danger', 'Error Encountered');
    showAndDismissAlert('info', 'Message Received');

As a side note, I styled the div.alert-messages fixed on top:

    <style>
    div.alert-messages {
        position: fixed;
        top: 50px;
        left: 25%;
        right: 25%;
        z-index: 7000;
    }
    </style>

For 2.3 and above, just add:

$(".alert").fadeOut(3000 );

bootstrap:

<div class="alert success fade in" data-alert="alert" >
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    // code 
</div>

Works in all browsers.

This is very important question and I was struggling to get it done (show/hide) message by replacing current and add new message.

Below is working example:

function showAndDismissAlert(type, message) {_x000D_
_x000D_
  var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';_x000D_
  $(".alert-messages").prepend(htmlAlert);_x000D_
  $(".alert-messages .alert").hide().fadeIn(600).delay(2000).fadeOut(1000, function() {_x000D_
    $(this).remove();_x000D_
  });_x000D_
_x000D_
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<div class="alert-messages"></div>_x000D_
_x000D_
<div class="buttons">_x000D_
  <button type="button" name="button" onclick="showAndDismissAlert('success', 'Saved Successfully!')">Button1</button>_x000D_
  <button type="button" name="button" onclick="showAndDismissAlert('danger', 'Error Encountered')">Button2</button>_x000D_
  <button type="button" name="button" onclick="showAndDismissAlert('info', 'Message Received')">Button3</button>_x000D_
</div>

Hope it will help others!

Add hide class to alert-message. Then put the following code after your jQuery script import:

$(document).ready( function(){
    $(".alert-message").animate({ 'height':'toggle','opacity':'toggle'});
    window.setTimeout( function(){
        $(".alert-message").slideUp();
    }, 2500);
});

If you want handle multiple messages, this code will hide them in ascending order:

$(document).ready( function(){
   var hide_delay = 2500;  // starting timeout before first message is hidden
   var hide_next = 800;   // time in mS to wait before hiding next message
   $(".alert-message").slideDown().each( function(index,el) {
      window.setTimeout( function(){
         $(el).slideUp();  // hide the message
      }, hide_delay + hide_next*index);
   });
});