javascript - 如何使用 .delay(x).animate({'opacity':'1'},x); 淡化每个不透明度为 0 的内部元素?
问题描述
我试图淡入这个 div 中的每个元素,例如。问题是我不知道为什么动画只在父级内部元素中没有改变。
我使用了以下 jQuery 但不起作用(也尝试了其他方法):jQuery('h1#hideme.welcome__title').delay(100).animate({'opacity':'1'},400); or jQuery('.welcome__title').delay(100).animate({'opacity':'1'},400); or jQuery('#hideme').delay(100).animate({'opacity':'1'},400);
我想专门使用以上几行。
<div class="section_one">
<div class="welcome_wrapper">
<div id="" class="welcome__container">
<div class="welcome">
<h1 id="hideme" class="welcome__title">Welcome to Dryft</h1>
<div class="welcome__info">
<p >A Boston waterfront restaurant destination with panoramic views of the harbor. Our menu highlights
many
exciting flavors in some of our most classic New England dishes with a focus on fresh seafood and
local
ingredients.</p>
</div>
<button class="btn-theme">
Book Event<i class="fas fa-arrow-right fa-xs"></i>
</button>
</div>
</div>
</div>
</div>
我的 CSS:
#hideme {
opacity: 0;
}
解决方案
它似乎工作正常。我为您编辑了一些内容,以检查它的进展情况。我hideme
从ID
to更改class
并将其添加到elements
将受到影响的 3 个(标题、文本和按钮)。所以我设置了jQuery
它。
HTML:
<div class="section_one">
<div class="welcome_wrapper">
<div id="" class="welcome__container">
<div class="welcome">
<h1 class="welcome__title hideme">Welcome to Dryft</h1>
<div class="welcome__info hideme">
<p >A Boston waterfront restaurant destination with panoramic views of the harbor. Our menu highlights
many
exciting flavors in some of our most classic New England dishes with a focus on fresh seafood and
local
ingredients.
</p>
</div>
<button class="btn-theme hideme">
Book Event<i class="fas fa-arrow-right fa-xs"></i>
</button>
</div>
</div>
</div>
</div>
CSS:
.hideme {
opacity: 0;
}
jQuery:
$('h1.hideme').delay(100).animate({'opacity':'1'},400);
$('.welcome__info.hideme').delay(400).animate({'opacity':'1'},400);
$('.btn-theme.hideme').delay(700).animate({'opacity':'1'},400);
推荐阅读
- pouchdb - 带有查询的 PouchDb alldocs()
- antlr4 - 是否有可能在 ANTLR4 中有使用令牌的令牌
- spring-boot - 使用也是关键字的函数
- android - 在 ListView 中包含的 ImageView 中使用 OnTouchListener
- android - 向谷歌和苹果商店发布应用程序的“副本”
- python - 将分组记录转换为 DataFrame
- hibernate - 如何验证 Hibernate c3p0 是否正常工作
- c++ - 无法从 qml 调用 c++ 方法:“对象的属性不是函数”
- javascript - 节点在完全有效的正则表达式上失败
- python - 如何将 lambda 函数分解为自己的函数?(Lambda 目前超过 125 个字符)