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

Posted 2023-05-08

【中文标题】关闭警报时引导内容平滑滑动

【英文标题】：Bootstrap content smooth slideup when closing alert

【发布时间】：2015-10-17 00:40:23

【问题描述】：

我有以下代码在 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>";

【问题讨论】：

在 jQuery 中，您可以只为 scrollTop 设置动画，但我认为您不会使用它，是吗？

@JaroslavŠtreit，是的，我使用 jQuery。但是scrollTop()只是设置了滚动条的值..不是那么流畅？

看这里***.com/questions/16475198/jquery-scrolltop-animation

@JaroslavŠtreit，我编辑了我的问题。尝试使用 animate() 和 scrollTop() 但不工作。内容在没有动画的情况下跳转到页面顶部。我做错了什么？

来自getbootstrap.com/javascript/#alerts - 要让您的警报在关闭时使用动画，请确保它们已经应用了.fade 和.in 类。 - 这样做不适合你？

【参考方案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/

【讨论】：

感谢您的好回答。我基于此编辑了我的问题。请看一看！

我现在在手机上，不能摆弄。但概念保持不变，只需将代码包装在一个函数中并在单击关闭按钮时调用它。不要使用引导程序烘焙的功能。

再次感谢，现在它几乎可以工作了。我更新了问题。

@lingo：请停止更改您的问题。它使当前答案无效。澄清您在 cmets 中的问题。如果确实需要，请在问题中添加内容，但不要更改它。

不，问题是一样的，向其中添加内容不会使任何内容无效。将代码示例添加到问题中比尝试通过 cmets 中的单词解释问题更容易。您发送的答案对我来说并不完美，这就是为什么我添加了更多信息来提问并在 cmets 中通知您。

【参考方案2】：

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

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