title: Add fade-in or fade-out on the addclass / removeclass event
body: <p>I created an <code>addclass</code> and <code>removeclass</code> event :</p>
  
  <pre><code>$(".myclass").click(function(){
     $(".hiding").removeClass("hiding");
     $(this).addClass("hiding");
  });
  </code></pre>
  
  <p>using the following CSS :</p>
  
  <pre><code>#wrapper a.hiding {
     display: none; 
  }
  </code></pre>
  
  <p>and the HTML :</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;a class="myclass" href="#2"&gt;
          &lt;img src="example.png"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can't seem to find a way to add a <code>fade-in</code> action when <code>addclass</code> is triggered. I would also like to add a <code>fade-out</code> when <code>removeClass</code> is triggered.</p>
  
  <p>I have tried the following CSS without success: </p>
  
  <pre><code> transition: all 0.5s ease;
  </code></pre>
  
  <p>Is there a better way through Javascript?</p>