Add fade-in or fade-out on the addclass / removeclass event

Question

I am a beginner, please don't be to rough with me.

I created an addclass and removeclass event :

$(".myclass").click(function(){
   $(".hiding").removeClass("hiding");
   $(this).addClass("hiding");
});

This is the CSS :

#wrapper a.hiding {
   display: none; 
}

And the HTML :

<div id="wrapper">
<a class="myclass" href="#2">
    <img src="">
</a>
</div>

So for the moment, it works fine, but I would like to add a fade-in action when addclass, and fade-out when removeclass I tried by the CSS using

 -webkit-transition: all 0.5s ease;

But it's not working.

Answer 1

I recommend you try this

edit: I realized just now using fadeIn() is better, try this:

$(".myclass").click(function(){
   $(".hiding").fadeOut('slow', function() {
       $(".hiding").removeClass("oldStuffHere");
       $(this).addClass("newStuffHere");
       $(this).fadeIn('slow', function() {
           // Animation complete
            });
      });

});