Bootstrap Alert不会褪色和滑动

Question

我的引导程序警报不适用于CSS动画类fadeout。正如BS文档closed.bs.alert中提到的那样：This event is fired when the alert has been closed (will wait for CSS transitions to complete). 但是我想要消退并且发出警报。

的JavaScript

$('.alert').each(function(index, el) {
   $(this).on('closed.bs.alert', function(){
     $(this).addClass('animated fadeOut')
   })
});

我可以使用jQuery fadeOut方法和slideUp来完成这项工作吗？

HTML

<div class="alert alert-success">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <p><i class="fa fa-check"></i> <strong>Success Message ! </strong>You have successfully registered</p>
</div>

Answer 1

你需要

• 在close.bs.alert
绑定活动
• 删除bootstrap动画并使用您自己的

请参阅下面的代码。

＆＃13;

＆＃13;

// bind event at 'close.bs.alert'
$('.alert').on('close.bs.alert', function(e) {

  // stop Bootstrap animation
  e.stopPropagation();

  // Use my own animation
  $(this).closest('.alert')
    .animate({
      height: 'toggle',
      opacity: 'toggle'
    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="alert alert-success fade in">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <p><i class="fa fa-check"></i>  <strong>Success Message ! </strong>You have successfully registered</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;