Add fade-in or fade-out on the addclass / removecl

我是初学者，请不要以粗糙的和我在一起。

我创建了一个addclass和removeclass事件：

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

这是CSS：

#wrapper a.hiding {
   display: none; 
}

和HTML：

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

所以就目前而言，它工作正常，但我想，当addclass加入淡入行动，和淡出的时候removeclass我尝试使用由CSS

 -webkit-transition: all 0.5s ease;

但它不工作。

Answer 1:

我建议你试试这个

编辑：我意识到刚才使用淡入（）是更好的，试试这个：

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

});

文章来源: Add fade-in or fade-out on the addclass / removeclass event