javascript 关闭警报时引导程序内容平滑上滑

Bootstrap content smooth slideup when closing alert

提问by lingo

I have following code to auto-close Bootstrap alert after 5 seconds

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

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

When closing alert, content jumps top not very smoothly. Is it somehow possible to get content slide smoothly into place?

关闭alert的时候，内容跳顶不是很流畅。是否有可能让内容平滑地滑动到位？

---

---

EDIT:Now the code is working correctly when I'm testing it on JSFiddle, but when I'm using it on my server, only half of it works. The alert is fading out after 3 seconds, but if I press Close button, nothing happens.

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

Following is my code. Maybe the problem is PHP echo, because the code is exactly the same as on JSFiddle.

以下是我的代码。也许问题是 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>";

采纳答案by Abhitalks

As per the bootstrap doc (http://getbootstrap.com/javascript/#alerts):

根据引导程序文档（http://getbootstrap.com/javascript/#alerts）：

To have your alerts use animation when closing, make sure they have the .fadeand .inclasses already applied to them.

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

This will cause the alert to fade out.

这将导致警报淡出。

However, as I see this animates the opacity but does not animate the height and hence the abrupt jump of the content when the alert is removed.

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

In this case you do not use the default functionality, but do the animation yourself on some event (setTimeout delay in your case). By animating the height of the alert, the content which follows will automatically appear to be animating.

在这种情况下，您不使用默认功能，而是在某些事件上自己制作动画（在您的情况下为 setTimeout 延迟）。通过为警报的高度设置动画，随后的内容将自动显示为动画。

Easiest would be to use the jQuery .slideUp:

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

Example:

例子：

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>

---

---

Edit:(based on Op comment)

编辑：（基于 Op 评论）

If you want that to happen on close button click and also the fade and slide animations to be separate, the concept remains the same. Just call the routine on close button click and stagger or chain the animations.

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

Quick Demo:

快速演示：

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

Combined Fiddle: http://jsfiddle.net/abhitalks/e3k5jnyw/

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

回答by Repo

initialize your alert, after 5 sec use jQuery to slide up your alert, then use bootstrap to close it =)

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

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