javascript - close - bootstrap mensajes emergentes

Contenido de Bootstrap deslizamiento suave al cerrar la alerta

Question

Tengo el siguiente código para cerrar automáticamente la alerta Bootstrap después de 5 segundos

$(".alert").alert();
window.setTimeout(function() { $(".alert").alert(''close''); }, 5000);

Al cerrar la alerta, el contenido salta arriba no muy suavemente. ¿Es de alguna manera posible que el contenido se deslice suavemente en su lugar?

EDITAR: Ahora el código está funcionando correctamente cuando lo estoy probando en JSFiddle , pero cuando lo estoy usando en mi servidor, solo la mitad funciona. La alerta se está desvaneciendo después de 3 segundos, pero si presiono el botón Cerrar, no pasa nada.

El siguiente es mi código. Tal vez el problema es PHP echo, porque el código es exactamente el mismo que en JSFiddle .

echo "<div class=/"alert alert-success/" role=/"alert/">".$message."<button type=/"button/" class=/"close/"><span aria-hidden=/"true/">&times;</span></button></div>";

Answer 1

Inicialice su alerta, después de 5 segundos use jQuery para deslizar su alerta, luego use el programa de arranque para cerrarlo =)

$(".alert").alert();    
window.setTimeout(function() { 
    $(".alert").slideUp(function() { 
        $(".alert").alert(''close'');
    });
}, 5000);

Answer 2

Según el documento bootstrap ( http://getbootstrap.com/javascript/#alerts ):

Para que sus alertas usen la animación al cerrar, asegúrese de que tengan las clases .fade y .in ya aplicadas.

Esto hará que la alerta se desvanezca.

Sin embargo, como veo, anima la opacidad pero no anima la altura y, por lo tanto, el salto brusco del contenido cuando se elimina la alerta.

En este caso, no usa la funcionalidad predeterminada, sino que realiza la animación usted mismo en algún evento (setTimeout delay en su caso). Al animar la altura de la alerta, el contenido que sigue aparecerá automáticamente animándose.

Lo más fácil sería usar jQuery .slideUp :

Ejemplo:

window.setTimeout(function() {
    //$(".custom-alert").alert(''close''); <--- Do not use this
  
    $(".custom-alert").slideUp(500, function() {
        $(this).remove();
    });
}, 3000);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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 alert-warning custom-alert" role="alert">
  <strong>Warning!</strong> This alert will animate itself to close in 3 secs.
</div>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>

Editar: (basado en el comentario de Op)

Si desea que eso ocurra al hacer clic en el botón Cerrar y también las animaciones de fundido y deslizamiento se separan, el concepto sigue siendo el mismo. Simplemente llame a la rutina al hacer clic en el botón Cerrar y escalonar o encadenar las animaciones.

Demostración rápida:

$("div.alert").on("click", "button.close", function() {
    $(this).parent().animate({opacity: 0}, 500).hide(''slow'');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><hr>
<div class="alert alert-warning" role="alert">
    <button type="button" class="close">
      <span>&times;</span>
    </button>    
      <strong>Warning!</strong> This alert will animate on clicking the close button.
</div>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>

Combined Fiddle: http://jsfiddle.net/abhitalks/e3k5jnyw/