Twitter Bootstrap警报是否可以淡入淡出？

Question

当我第一次看到Bootstrap中的警报时,我认为它们的行为类似于模态窗口,下降或淡入,然后在关闭时淡出.但似乎它们总是可见的.我想我可以让他们坐在我的应用程序上方的一层并管理显示它们,但我想知道功能是否内置？

谢谢!

编辑,我到目前为止:

<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

Answer 1

我强烈不同意前面提到的大多数答案.

简短回答:

省略"in"类并使用jQuery添加它以淡入它.

请参阅此jsfiddle以获取在3秒后退出警报的示例http://jsfiddle.net/QAz2U/3/

答案很长:

虽然真正的bootstrap本身不支持淡入淡出警报,但这里的大多数答案都使用jQuery淡入淡出函数,该函数使用JavaScript来动画(淡化)元素.这方面的最大优点是跨浏览器兼容性.缺点是性能(参见:jQuery调用CSS3淡入淡出动画？).

Bootstrap使用CSS3过渡,具有更好的性能.这对移动设备很重要:

引导CSS淡化警报:

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

为什么我认为这种表现如此重要？使用旧浏览器和硬件的人可能会使用jQuery.fade()获得不稳定的过渡.对于具有现代浏览器的旧硬件也是如此.使用CSS3过渡使用现代浏览器的人即使使用较旧的硬件也能获得流畅的动画,而使用不支持CSS过渡的旧版浏览器的用户只会立即看到弹出的元素,我认为这是比不稳定的动画更好的用户体验.

我来到这里寻找与上面相同的答案:淡入一个引导警报.在对Bootstrap的代码和CSS进行一些挖掘后,答案非常简单.不要在警报中添加"in"类.当你想要淡入你的警报时,使用jQuery添加它.

HTML(公告不存在的类!)

<div id="myAlert" class="alert success fade" data-alert="alert">
  <!-- rest of alert code goes here -->
</div>

使用Javascript:

function showAlert(){
  $("#myAlert").addClass("in")
}

调用上面的函数函数会添加"in"类并使用CSS3过渡淡入警报:-)

另请参阅此jsfiddle以获取使用超时的示例(感谢John Lehmann!):http://jsfiddle.net/QAz2U/3/

Answer 2

我使用的是这样的:

在模板中的警报区域

<div id="alert-area"></div>

然后是一个用于显示警报的jQuery函数

function newAlert (type, message) {
    $("#alert-area").append($("<div class='alert-message " + type + " fade in' data-alert><p> " + message + " </p></div>"));
    $(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); });
}
newAlert('success', 'Oh yeah!');

Answer 3

你可以使用jquery淡入一个盒子.使用"hide"类中内置的bootstrap在div元素上有效地设置display:none:

<div id="saveAlert" class="alert alert-success hide" data-alert="alert" style="top:0">
            <a class="close" href="#">×</a>
            <p><strong>Well done!</strong> You successfully read this alert message.</p>
        </div>

然后在jquery中使用fadeIn函数,如下所示:

$("#saveAlert").fadeIn();

还指定了fadeIn函数的持续时间,例如:$("#saveAlert").fadeIn(400);

有关使用fadeIn函数的完整详细信息,请访问官方jQuery文档站点:http://api.jquery.com/fadeIn/

只是一个旁注,如果你不使用jquery,你可以将'hide'类添加到你自己的CSS文件中,或者只是将它添加到你的div:

 <div style="display:none;" id="saveAlert">

然后你的div基本上被设置为默认隐藏,然后jQuery将执行fadeIn动作,强制显示div.

Answer 4

对于2.3及以上,只需添加:

$(".alert").fadeOut(3000 );

引导:

<div class="alert success fade in" data-alert="alert" >
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    // code 
</div>

适用于所有浏览器.

Answer 5

添加hide课程alert-message.然后在jQuery脚本导入后输入以下代码:

$(document).ready( function(){
    $(".alert-message").animate({ 'height':'toggle','opacity':'toggle'});
    window.setTimeout( function(){
        $(".alert-message").slideUp();
    }, 2500);
});

如果要处理多条消息,此代码将按升序隐藏它们:

$(document).ready( function(){
   var hide_delay = 2500;  // starting timeout before first message is hidden
   var hide_next = 800;   // time in mS to wait before hiding next message
   $(".alert-message").slideDown().each( function(index,el) {
      window.setTimeout( function(){
         $(el).slideUp();  // hide the message
      }, hide_delay + hide_next*index);
   });
});