Javascript 淡入引导警报不起作用

我正在尝试使用

Twitter引导程序实现
警报
，但是当用户加载页面时，我很难让它淡入。基本上，这是迄今为止的代码：

HTML
jQuery
但是当我加载页面时，无法看到
警报
，我想知道我做错了什么
 您应该使用“淡入”类将该类添加到div中：

不是添加到它里面的按钮。
@我在上面的评论中说，看起来你是在将类添加到子类，而不是父类

如果您使用jquery，您可以探索使用更多的jquery

或者让它添加一个类，在其中存储
fadeIn
动画。你的喜好
 你的意思是让它用淡入类将in类添加到实际div中吗？
<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> 

.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;
}

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

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

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