在 addclass / removeclass 事件上添加淡入或淡出

Question

我創建了一個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="example.png">
    </a>
</div>

當addclass被觸發時，我似乎找不到添加fade-in動作的方法。 我還想在觸發removeClass時添加fade-out 。

我嘗試了以下 CSS 沒有成功：

 transition: all 0.5s ease;

有沒有更好的方法通過Javascript？

Answer 1

我建議你試試這個

編輯：我剛剛意識到使用fadeIn() 更好，試試這個：

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

});