关闭警报时,Bootstrap内容会平滑滑动

Question

我有以下代码在5秒后自动关闭Bootstrap警报

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

关闭警报时,内容跳跃不是很顺利.以某种方式可以让内容顺利地滑入到位吗？

---

编辑:现在我在JSFiddle上测试它时代码正常工作,但是当我在我的服务器上使用它时,只有一半有效.警报在3秒后消失,但如果我按下关闭按钮,则没有任何反应.

以下是我的代码.也许问题是PHP echo,因为代码与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

根据bootstrap doc(http://getbootstrap.com/javascript/#alerts):

要在关闭时让警报使用动画,请确保它们已经应用了类.fade和.in类.

这将导致警报淡出.

但是,正如我所看到的那样,这会激活不透明度,但不会为高度设置动画,因此在删除警报时内容会突然跳转.

在这种情况下,您不使用默认功能,而是在某些事件上自己动画(在您的情况下为setTimeout延迟).通过设置警报高度的动画,后面的内容将自动显示为动画.

最简单的方法是使用jQuery .slideUp:

例:

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>

编辑:(基于Op评论)

如果您希望在关闭按钮单击以及淡入淡出和幻灯片动画分开时发生这种情况,则概念保持不变.只需在关闭按钮上点击例程并交错或链接动画即可.

快速演示:

$("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>

组合小提琴:http://jsfiddle.net/abhitalks/e3k5jnyw/