淡入淡出Bootstrap警报不起作用

Question

我正在尝试使用alert实现Twitter Bootstrap但是当用户加载页面时，我很难让它淡入淡出。基本上这是到目前为止的代码：

HTML

<div class="alert alert-success fade alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <strong>Welcome!</strong> Administrator...
</div> 

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

$(document).ready(function(){
   showAlert(); 
});

function showAlert(){
  $(".close").addClass("in")
}

但是当我加载页面时Alert无法看到，我想知道我做错了什么？

Answer 1

@我上面的评论，看起来你正在将这个类添加到孩子而不是父母。

如果你正在使用jquery，你可以探索使用更多的http://jsfiddle.net/evanbriggs/6us0dLyL/

或者只是添加一个存储fadeIn动画的类http://jsfiddle.net/evanbriggs/1gr9k0sq/。你的偏好！

Answer 2

您应该使用“fade”类将该类添加到div：

$(".fade").addClass("in")

不要进入里面的按钮。