在addclass/removeclass事件中添加淡入淡出

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

本文关键字：添加 淡入 淡出 事件 addclass removeclass      更新时间：2023-09-26

我创建了一个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有更好的方法吗？

我建议你试试这个

编辑：我刚才意识到使用fadeIn（）更好，试试这个：

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