如何使用jquery ToggleClass fadeIn

时间:2017-12-26 01:26:59

标签: jquery html css

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

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

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

.blue {
    color: blue;
}

这是CSS的一个例子:

{{1}}

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

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

您可能想要使用CSS transitions

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

h1 {
  opacity: 0;
}

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

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

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