使用Bootstrap的fadeIn面板

Question

I would like to fadeIn a panel form that I've made in Bootstrap 3. I've tried different methods but I cannot figure it out.

Here is the JSFiddle .

This is my fade function:

$( document ).ready(function() {
    $( ".anim" ).fadeIn( "slow" );
});

Answer 1

You need to hide .anim in css so it can fade in.

.anim {
  display: none;
}

Answer 2

Could also do this

add .anim {display:none} to the css then show it in

$( document ).ready(function() {
  $( ".anim" ).fadeIn( "slow" );
});

http://jsfiddle.net/1egdn3wx/1/

Answer 3

You have to consider that fadeIn method make the .anim elements opacity from the current to 1. So because the current opacity of .anim is 1, fadeIn() consider the fading done.

You should execute the hide() method before fadeIn . So your script will become as follow.

$( document ).ready(function() {
  $( ".anim" ).hide().fadeIn( "slow" );
});

Edit: this I've forked your fiddle with this working demo