Question

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

class String
  def self.color_mapping
    {
      red: 91,
      blue: 100
    }
  end

  def color(code)
    "\e[#{code}m#{self}\e[0m"
  end

  color_mapping.each do |c, v|
    define_method(c) do
      color(v)
    end
  end

  def method_missing(name, *args)
    send(:color, 0)
  end
end

关闭提醒时，内容跳跃不是很顺利。是否有可能将内容顺利地放到适当位置？

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

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

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

Answer 1

根据bootstrap doc（http://getbootstrap.com/javascript/#alerts）：

要让您的提醒在关闭时使用动画，请确保它们具有 .fade和.in类已经应用于它们。

这将导致警报淡出。

然而，正如我所看到的那样，这会激活不透明度，但不会为高度设置动画，因此在删除警报时会突然跳转内容。

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

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

<强> 实施例

＆＃13;

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

＆＃13;

<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>

＆＃13;

修改（根据Op评论）

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

快速演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

初始化你的警报，5秒后使用jQuery上调警报，然后使用bootstrap关闭它=）

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

关闭警报时，Bootstrap内容会平滑滑动

2 个答案: