How to use fadein() in addClass()?

Question

I have ten "Id" class elements, minus the first. By clicking a button I remove the next Hide and add the class "show", but when adding it I want to put a fadein effect(). It is possible?

Answer 1

Follow Fiddle with what you wish: http://jsfiddle.net/hdg9p/1/

HTML

<div>A</div>
<div class="hide">B</div>
<div class="hide">C</div>
<div class="hide">D</div>
<div class="hide">E</div>
<div class="hide">F</div>
<div class="hide">G</div>
<div class="hide">H</div>
<div class="hide">I</div>
<div class="hide">J</div>

CSS

.hide {
    width: 100px; height: 100px; background-color: red;
    display: none;
}

JS

$(".hide").fadeIn(3000).removeClass("hide");

Answer 2

It is possible to perform such effect using css3 Transition. Ex:

CSS:

div {
  transition: 1.3s;
  opacity: 1;
}

.hide{
   opacity: 0;
}

Your javascript would look like this:

$(".hide").removeClass("hide");