使用 jQuery 将一个类淡入另一个类

发布于 2025-01-02 18:57:55 字数 578 浏览 5 评论 0原文

我试图将一个类淡化为“悬停”在一个类的链接上。因此悬停类必须淡入以表示悬停效果。

我的 a 标签的 css 类以一种颜色应用了渐变，而表示“悬停”效果的另一个类应用了不同的颜色渐变。

我尝试了这个，但这不是想要的效果，悬停类应该淡入和淡出，而普通类不会先消失。

$("a").hover(
            function () {
                $(this).fadeOut(function () {
                    $(this).removeClass("btn").addClass("btn2").fadeIn('fast');
                });
            },
            function () {
                $(this).fadeOut(function () {
                    $(this).removeClass("btn2").addClass("btn").fadeIn('fast');
                });
            }
        );

原文

i am trying to fade a class as "hover" in over a link with a class.
so the hover class has to fade in to represent a hover effect.

my css class for the a tag has a gradient applied to it in one color, and the other class representing the "hover" effect has a different color gradient applied to it.

I tried this, but it is not the desired effect, the hover class should just fade in and out, without the normal class disappearing first.

$("a").hover(
            function () {
                $(this).fadeOut(function () {
                    $(this).removeClass("btn").addClass("btn2").fadeIn('fast');
                });
            },
            function () {
                $(this).fadeOut(function () {
                    $(this).removeClass("btn2").addClass("btn").fadeIn('fast');
                });
            }
        );

分享到QQ

分享到微博

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

发布评论

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

空袭的梦i 2025-01-09 18:57:55

您还可以使用 .animate('opacity','0.5');
将鼠标悬停在上时，它也会显示淡入淡出效果。

回复收藏 0 原文

浅蓝的眸勾画不出的柔情 2025-01-09 18:57:55

尝试使用切换类函数

$("a").hover(
            function () {
                $(this).fadeInOut(function () {
                    $(this).toggleClass('btn btn2');
                });
            },
            }
        );

try using toggleclass function

$("a").hover(
            function () {
                $(this).fadeInOut(function () {
                    $(this).toggleClass('btn btn2');
                });
            },
            }
        );

回复收藏 0 原文

~没有更多了~