在addclass removeclass事件中增加淡入或淡出功能。

Question

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

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

使用下面的CSS。

#wrapper a.hiding {
   display: none; 
}

和HTML.NET语言。

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

我似乎找不到一个方法来添加一个 "事件"。fade-in 当 addclass 被触发。我还想添加一个 fade-out 当 removeClass 被触发。

我试过下面的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
            });
      });

});