Bootstrap 3 alertes rejeté avec animation

Est-il un moyen de faire des licenciés d'alerte dans le bootstrap ont une animation comme fade out?

J'ai ajouté de la classe .fade le code:

 <div class="alert alert-info fade alert-dismissable">
      <p><b>Gracias</b> por ponerte en contacto! Responderé a tu correo lo más pronto posible.</p>
 </div>

Mais ça ne fonctionne pas. Toute aide sera appréciée!

pour aucune des réponses ci-dessous (à l'exception de @guest), si vous souhaitez supprimer le .alert de DOM, $('.alert').alert('close') doit être appelée

OriginalL'auteur codeninja | 2013-12-31

  1. 9

    vous pouvez omettre les données de rejeter l'attribut 

    <div class="alert alert-warning alert-dismissable">
      <button type="button" class="close" aria-hidden="true">&times;</button>
      <p>animated dismissable</p>
</div>

    et utiliser les jQuery

    $(".alert button.close").click(function (e) {
    $(this).parent().fadeOut('slow');
});

    ou si vous voulez en cliquant n'importe où pour fermer le message d'alerte utilisation

    $(".alert-dismissable").click(function (e) {
    $(this).fadeOut('slow');
});
    En fait, si vous voulez que cela fonctionne, vous devez omettre les données de rejeter attribut (vous n'avez pas le choix)

    OriginalL'auteur Ahm3d Said

  2. 41

    vous pouvez ajouter '.dans la classe, alerte fade out.

    <div class="alert alert-info fade in">
<a class="close" data-dismiss="alert" href="#">&times;</a>
<p>message</p>
</div>
    Un peu à la confusion que l'ajout de la in classe rend fade lorsqu'il est fermé, mais belle réponse. +1 pour l'aide intégrée dans le Bootstrap de la fonctionnalité.

    OriginalL'auteur guest

  3. 3

    $('.alert-dismissable').fadeOut(); ou attribuer un css3 fade out de l'animation à votre fondu de la classe et de l'appliquer à la <div> quand vous le voulez à s'estomper.

    OriginalL'auteur zgood

  4. 2

    Vous pouvez écouter close.bs.alert événement d'utiliser des effets personnalisés:

    $(function(){
    $('body').on('close.bs.alert', function(e){
        e.preventDefault();
        e.stopPropagation();
        $(e.target).slideUp();
    });
});

    Voir en action à https://jsfiddle.net/6s8dgh72/8/

    OriginalL'auteur Pavel Dubinin