¿Pueden las alertas de Bootstrap de Twitter desvanecerse tanto como fuera?

Lo que uso es esto:

En su plantilla un área de alerta

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

Luego una función jQuery para mostrar una alerta

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!');

Puede fundirse en un cuadro usando jquery. Use bootstraps construidos en la clase' hide ' para establecer efectivamente display:none en el elemento div:

<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>

Y luego usa la función fadeIn en jquery, así:

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

También se especifica una duración para la función fadeIn, por ejemplo: sav ("#saveAlert").fadeIn (400);

Los detalles completos sobre el uso de la función fadeIn se pueden encontrar en el sitio oficial de documentación de jQuery: http://api.jquery.com/fadeIn /

Solo una nota lateral como bueno, si no usas jquery, puedes agregar la clase 'hide' a tu propio archivo CSS, o simplemente agregar esto a tu div:

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

Su div se establecerá básicamente como oculto por defecto, y luego jQuery realizará la acción fadeIn, forzando a que se muestre el div.

Para 2.3 y superior, simplemente agregue:

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

Bootstrap:

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

Funciona en todos los navegadores.

Añadir hide clase a alert-message. A continuación, coloque el siguiente código después de la importación de script de jQuery:

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

Si desea manejar varios mensajes, este código los ocultará en orden ascendente:

$(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);
   });
});

Ninguna de las respuestas actuales funcionó para mí. Estoy usando Bootstrap 3.

Me gustó lo que Rob Vermeer estaba haciendo y partí de su respuesta.

Para un efecto fade in y luego fade out, solo usé la siguiente función y usé jQuery:

Html en mi página para agregar la(s) alerta (s) a:

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

Función Javascript para mostrar y descartar la alerta.

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(); });
}

Entonces, para mostrar y descartar la alerta, simplemente llame a la función de esta manera:

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

Como un lado nota, diseñé el div.mensajes de alerta fijos en la parte superior:

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

No estoy de acuerdo con la forma en que Bootstrap usa fade in (como se ve en su documentación - http://v4-alpha.getbootstrap.com/components/alerts / ), y mi sugerencia es evitar los nombres de clase fade y in, y evitar ese patrón en general (que actualmente se ve en la respuesta mejor valorada a esta pregunta).

(1) La semántica es incorrecta - las transiciones son temporales, pero los nombres de las clases siguen vivos. Entonces, ¿por qué deberíamos nombrar nuestras clases fade y fade in? Debe ser faded y faded-in, para que cuando los desarrolladores lean el marcado, quede claro que esos elementos eran faded o faded-in. El equipo de Bootstrap ya ha eliminado hide para hidden, ¿por qué es fade diferente?

(2) Usando 2 clases fade y in para una sola transición contamina el espacio de clases. Y, no está claro que fade y in están asociados entre sí. La clase in parece una clase completamente independiente, como alert y alert-success.

La mejor solución es utilizar faded cuando el elemento se ha desvanecido, y reemplazar esa clase con faded-in cuando el elemento se ha desvanecido.

Alerta se desvaneció

Así que para responder a la pregunta. Creo que el marcado de alerta, el estilo y la lógica deben escribirse de la siguiente manera. Nota: Siéntase libre de reemplazar la lógica de jQuery, si está utilizando javascript de vainilla.

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');

});

Por supuesto, Sí. Utilice este sencillo archivo en su proyecto: https://gist.github.com/3851727

Primero agregue HTML como este:

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

Y luego use:

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

Puede pasar todos los tipos de alertas de bootstrap, como error, success y warning a type propiedad como opciones.

Tengo esta manera de cerrar desvaneciendo mi Alerta después de 3 segundos. Espero que sea útil.

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

Esto es muy pregunta importante y yo estaba luchando para conseguirlo hecho (mostrar/ocultar) mensaje mediante la sustitución de actual y añadir nuevo mensaje.

A continuación se muestra el ejemplo de trabajo:

function showAndDismissAlert(type, message) {

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

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

<div class="buttons">
  <button type="button" name="button" onclick="showAndDismissAlert('success', 'Saved Successfully!')">Button1</button>
  <button type="button" name="button" onclick="showAndDismissAlert('danger', 'Error Encountered')">Button2</button>
  <button type="button" name="button" onclick="showAndDismissAlert('info', 'Message Received')">Button3</button>
</div>

¡Espero que ayude a otros!