jquery - 如何使用 jquery 切换类淡入

Question

我正在尝试在我的网站上制作一组不同的动画。 例如，我有一些包含标题/段落/跨度的 HTML 标记。 我想让标题在淡入时改变颜色，让段落以不同的颜色淡入等等。 这是我的 html 的示例:

<button>Toggle Me</button>
<h1>My First Line</h1>
<h2>The Second Line</h2>
<p>This is a paragraph.</p>
<span>This is a span.</span>

这是我尝试过的小 jquery 示例:

$(document).ready(function(){
    $("button").click(function(){
        $("h1").toggleClass("blue");
        $("h2").toggleClass("yellow");
        $("p").toggleClass("red");
    });
});

这是 CSS 的一个例子:

.blue {
    color: blue;
}

任何关于如何使这项工作的建议将不胜感激:

Answer 1

你可以尝试使用 fadeIn 试试下面的代码: 所以将类 hide 添加到 html 标签中，如下所示:

<button>Toggle class</button>
<h1 class="hide">My First Line</h1>
<h2 class="hide">The Second Line</h2>
<p class="hide">This is a paragraph.</p>
<span class="hide">This is a span.</span>

此外，您还需要在 css 中定义它:

.blue {
    color: blue;
}
.yellow {
    color: yellow;
}
.red {
    color: red;
}
.gray{
    color: gray;
}
.hide{
    display:none;
}

这就是我在脚本中使用它的方式:

$(document).ready(function(){
    $("button").click(function(){
        $("h1").fadeIn(4000).toggleClass("blue");
        $("h2").fadeIn(4000).toggleClass("yellow");
        $("p").fadeIn(4000).toggleClass("red");
        $("span").fadeIn(4000).toggleClass("gray");
    });
});

您可以随时将 4000 = 4 秒更改为您想要的任何值。 并更改最适合您的颜色和类别。