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

发布于 2024-12-27 07:47:40 字数 731 浏览 1 评论 0原文

我创建了一个 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>

我似乎找不到添加 fade-in< 的方法触发 addclass 时的 /code> 操作。我还想在触发 removeClass 时添加fade-out。

我尝试过以下 CSS 但没有成功：

 transition: all 0.5s ease;

Is there a better way through Javascript?

原文

I created an addclass and removeclass event :

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

using the following CSS :

#wrapper a.hiding {
   display: none; 
}

and the HTML :

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

I can't seem to find a way to add a fade-in action when addclass is triggered. I would also like to add a fade-out when removeClass is triggered.

I have tried the following CSS without success:

 transition: all 0.5s ease;

Is there a better way through Javascript?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

七婞 2025-01-03 07:47:40

我建议你尝试这个

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

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

});

I recommend you try this

edit: I realized just now using fadeIn() is better, try this:

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

});

回复收藏 0 原文

~没有更多了~