javascript - 在 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

我建议您尝试this

编辑:我刚刚意识到使用 fadeIn() 更好，试试这个:

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

});