Bootstrap Alert中的淡入不起作用

Question

I am trying to implement an alert using Twitter Bootstrap however I am having a lot of difficulty in getting it to fade in when the user loads the page. Basically this is the code so far:

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")
}

But when I load the page the Alert cannot be seen, I'm wondering what I am doing wrong?

Answer 1

@ My comment above, it looks like you're adding the class to the child, and not the parent.

If you're using jquery, you could explore using more of it http://jsfiddle.net/evanbriggs/6us0dLyL/

or just have it add a class where a fadeIn animation is stored http://jsfiddle.net/evanbriggs/1gr9k0sq/ . Your preference!

Answer 2

You should add the class to the div with the "fade" class:

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

Not to the button inside it.