一次设置一个段落的动画
一次设置一个段落的动画
提问于 2020-02-02 23:41:36
我有一个div，里面有几个段落。我希望这些段落一个接一个地淡入。我可以用下面的代码做到这一点。然而，由于我将有更多的div和许多其他的段落，每个段落都有它们独特的类名，我想知道是否有更容易的方法来实现这一点，而不是一直复制-粘贴代码，每次都更改类名。
$('.line1').css('visibility','visible').hide().fadeIn(1000, function(){
$('.line2').css('visibility','visible').hide().fadeIn(1000, function(){
$('.line3').css('visibility','visible').hide().fadeIn(1000, function(){
$('.line4').css('visibility','visible').hide().fadeIn(1000);
});
});
});.line1, .line2, .line3, .line4 {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<p class="line1">Text 01</p>
<p class="line2">Text 02</p>
<p class="line3">Text 03</p>
<p class="line4">Text 04</p>
</div>
Stack Overflow用户
回答已采纳
发布于 2020-02-02 23:45:19
类名在这里无关紧要，您可以使用.line或.line{i}或其他任何东西，只要有一种简单的方法来选择它们。
如果你想要不同的类名，你可以在代码中用.div1 > p代替.line。
如果轻微的(+/-几毫秒)误差不是问题，你可以使用setTimeout。
$(".line").each(function (i) {
$(this).css("opacity", 0);
setTimeout(() => {
$(this).animate({ opacity: 1 }, 1000);
}, 1000 * i);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<p class="line">Text 01</p>
<p class="line">Text 02</p>
<p class="line">Text 03</p>
<p class="line">Text 04</p>
</div>
您也可以使用.delay而不是setTimeout。
$(".line").each(function (i) {
$(this).css("opacity", 0).delay(1000 * i).animate({ opacity: 1 }, 1000);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<p class="line">Text 01</p>
<p class="line">Text 02</p>
<p class="line">Text 03</p>
<p class="line">Text 04</p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60027734
复制相关文章
相似问题
腾讯云开发者
