[英]how do I fadeIn each of the inner elements with an opacity of 0 with .delay(x).animate({'opacity':'1'},x);?
我试图淡入这个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);
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
更改为class
,并将其添加到将受到影响的3个elements
(标题,文本和按钮)中。 所以我设置了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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.