Bootstrap 关闭警报时内容平滑向上滑动

Question

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

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

关闭alert时，内容跳转不是很流畅。是否有可能让内容顺利地滑动到位？

编辑： 现在，当我 testing it on 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 文档 (http://getbootstrap.com/javascript/#alerts)：

To have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them.

这将导致警报淡出。

但是，正如我所见，这会为不透明度设置动画，但不会为高度设置动画，因此当删除警报时内容会突然跳转。

在这种情况下，您不使用默认功能，而是在某些事件上自己制作动画（在您的情况下为 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>

编辑：（基于操作评论）

如果您希望在关闭按钮单击时发生这种情况，并且淡入淡出和幻灯片动画分开，则概念保持不变。只需在单击关闭按钮时调用例程并交错或链接动画。

快速演示：

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

合并Fiddle：http://jsfiddle.net/abhitalks/e3k5jnyw/

Answer 2

初始化您的警报，5 秒后使用 jQuery 向上滑动您的警报，然后使用 bootstrap 关闭它 =)

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

Bootstrap 关闭警报时内容平滑向上滑动

Bootstrap content smooth slideup when closing alert

javascript

alert

twitter-bootstrap-3