我正在尝试在我的网站上制作一组不同的动画。 例如,我有一些包含标题/段落/跨度的HTML标记。 我想让标题在淡入时改变颜色,并且段落用不同颜色的fadein等等。 这是我的html示例:
$(document).ready(function(){
$("button").click(function(){
$("h1").toggleClass("blue");
$("h2").toggleClass("yellow");
$("p").toggleClass("red");
});
});
这是我尝试过的小jquery的例子:
.blue {
color: blue;
}
这是CSS的一个例子:
{{1}}
非常感谢任何有关如何完成这项工作的建议:
答案 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;
添加到类中。