我有一组帖子正在尝试逐一淡出。在我的实际示例中,它们是砖石结构,因此这将产生它们锁定在一起的效果。基本上喜欢这里的帖子:https://undsgn.com/uncode/blog/blog-full-width-masonry/
因此,对于这个例子,我组装了一个 JSFiddle:enter link description here
其中包含:
HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="fade-in-post-container">
<div class="elementor-post">Post</div>
<div class="elementor-post">Post</div>
<div class="elementor-post">Post</div>
</div>
CSS:
.elementor-post {
padding:20px 30px;
display:inline-block;
text-align:centre;
background:red;
}
jQuery:
jQuery('.fade-in-post-container .elementor-post').addClass('animated fadeInUp');
因此,正如您可能看到的,我正在使用 .css 库 Animate.css,并使用 jQuery 来查找元素并向其应用所需的 .animate .effect 类。
到目前为止,效果很好,但正如您从 JSFiddle 中看到的那样,它们都会立即淡入,而不是一个接一个地互锁......
我考虑过以某种方式利用它:
.each(function(i) {
jQuery(this).delay(250 * i)
如果我可以使用 jQuery 动画,哪一个可以?但我想这可能只是一次将类应用于一个元素,我尝试了一下,但它不起作用......
我也尝试过使用 jQuery fadeIn 或动画创建整个效果,但我发现很难找到可行的解决方案......
最佳答案
也许这就是你想要的..
jQuery('.fade-in-post-container .elementor-post').each(function(i) {
setTimeout(()=>{$(this).addClass('animated fadeInUp')}, 250 * i);
});
关于javascript - 动画 - jQuery - 带有延迟的 fadeInUp,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52299558/