Question

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

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

这是我尝试过的小jquery的例子：

.blue {
    color: blue;
}

这是CSS的一个例子：

{{1}}

非常感谢任何有关如何完成这项工作的建议：

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秒更改为您想要的任何内容。并改变颜色和类别，因为它最适合你。

Answer 2

您可能想要使用CSS transitions

以下CSS适用于h1标记的脚本：

h1 {
  opacity: 0;
}

.blue {
  color: blue;
  opacity: 1;
  transition: opacity 300ms ease-out;
}

有了这个，你也应该能够创建其他类。

如果您最初想要隐藏内容，可以将display: none;添加到初始CSS并将display: block;添加到类中。

如何使用jquery ToggleClass fadeIn

2 个答案: