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

本文介绍了关闭警报时引导内容平滑滑动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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

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

编辑：现在的代码在JSFiddle上进行测试时，但在我在服务器上使用它时，它可以正常工作，只有一半有效。警报在3秒后消失了，但是如果我按关闭按钮，什么也没发生。

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.

以下是我的代码。也许问题是PHP回声，因为代码与 JSFiddle 上的代码完全相同。

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

echo "<div class=\"alert alert-success\" role=\"alert\">".$message."<button type=\"button\" class=\"close\"><span aria-hidden=\"true\">&times;</span></button></div>";

推荐答案

根据引导文档（ getbootstrap/javascript/#alerts ）：

要让您的警报在关闭时使用动画，请确保它们具有 .fade 和。

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

这将导致警报消失。

但是，正如我所看到的那样，这可以使不透明度具有动画效果，但不能动画化高度，因此在删除警报时内容会突然跳动。

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.

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

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.

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

Easiest would be to use the jQuery .slideUp:

示例：

Example:

window.setTimeout(function() { //$(".custom-alert").alert('close'); <--- Do not use this $(".custom-alert").slideUp(500, function() { $(this).remove(); }); }, 3000);

<link href="maxcdn.bootstrapcdn/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="ajax.googleapis/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的评论）

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

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.

快速演示：

$("div.alert").on("click", "button.close", function() { $(this).parent().animate({opacity: 0}, 500).hide('slow'); });

<link href="maxcdn.bootstrapcdn/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="ajax.googleapis/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>

组合小提琴： jsfiddle/abhitalks/e3k5jnyw/