Bootstrap 3警报被动画解雇

cod*_*nja 14 html jquery html5 twitter-bootstrap twitter-bootstrap-3

有没有办法让bootstrap中的被解雇警报有一个像淡出的动画?

我将类添加.fade到代码中:

 <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>
Run Code Online (Sandbox Code Playgroud)

但它不起作用.任何帮助将不胜感激!

小智 42

你可以添加'.in'课程,警告淡出.

<div class="alert alert-info fade in">
<a class="close" data-dismiss="alert" href="#">&times;</a>
<p>message</p>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 添加"in"类有点令人困惑,它会在关闭时淡出**,但很好的答案.+1使用内置的Bootstrap功能. (6认同)

Ahm*_*aid 9

你可以省略data-dismiss属性

<div class="alert alert-warning alert-dismissable">
      <button type="button" class="close" aria-hidden="true">&times;</button>
      <p>animated dismissable</p>
</div>
Run Code Online (Sandbox Code Playgroud)

并使用以下jQuery

$(".alert button.close").click(function (e) {
    $(this).parent().fadeOut('slow');
});
Run Code Online (Sandbox Code Playgroud)

或者如果你想点击任何地方关闭警报使用

$(".alert-dismissable").click(function (e) {
    $(this).fadeOut('slow');
});
Run Code Online (Sandbox Code Playgroud)