关闭警报时引导内容平滑滑动

Question

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

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

关闭警报时，内容跳到顶部不是很顺利。是否有可能以某种方式让内容顺利滑入到位？

---

编辑： 现在代码在我testing it on JSFiddle 时工作正常，但是当我在服务器上使用它时，只有一半工作。警报在 3 秒后消失，但如果我按下关闭按钮，则没有任何反应。

以下是我的代码。可能问题出在 PHP 回显上，因为代码和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

根据引导文档 (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/

Answer 2

初始化警报，5 秒后使用 jQuery 向上滑动警报，然后使用引导程序关闭它 =)

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