How to use fadeIn () in addClass ()?

Navigation
5

I have 10 elements with class "hide", less the first one. When I click on a button I remove the next hide and add the class "show", but when I add it I want to put a fadeIn () effect. Is it possible?

    
asked by anonymous 20.02.2014 / 15:06

2 answers

4

Follow Fiddle with what you want: link

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");
    
20.02.2014 / 15:15
1

This effect can be achieved using css3's transition. Ex:

CSS: 

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

.hide{
   opacity: 0;
}

Your javascript would look like this: 

$(".hide").removeClass("hide");
    
20.02.2014 / 19:03
What is a client-side prepared statement? Is it possible to call internal method (without visibility operator) from a class inherited from another package?