jQuery fadeIn和带延迟的slideUp

希望有人能帮忙。。。我目前在Wordpress中有一组post/div，我已经设置为使用jQuery逐个淡入

基本上就像这里的这些帖子：当你点击一个过滤器时，它们都会淡入并一个接一个地向上滑动

我想给它添加一个滑动效果，这样可以同时向上滑动和淡入。我正在努力添加第二个效果，我得到了不可预测的结果

我目前掌握的守则如下：

HTML

jQuery

jQuery(".fade-in-post-container .elementor-post").each(function(i) {
    jQuery(this).delay(500 * i).fadeIn(1000);
});

下面是一个JSFIDLE：

我试过这个：

jQuery(".fade-in-post-container .elementor-post").each(function(i) {
    jQuery(this).delay(250 * i).fadeIn(1000).slideUp(1000);
});

还有其他一些事情，但我似乎无法让它正常工作

---

非常感谢您抽出时间观看。

您可以在不排队的情况下制作动画（同时）：

工作代码：

$（'#运行'）。单击（函数（）{
$（'.fade-in-post-container.elementor-post'）.animate（{opacity:1}，{duration:4000，queue:false}）；
$（'.fade-in-post-container.elementor-post'）.animate（{marginTop:0}，{duration:2000，queue:false}）；
});
。淡入邮件容器{
}
.淡入式邮政集装箱。elementor邮政{
宽度：25%；
高度：50px；
显示：块；
利润率：1%；
边框：1px实心#000；
浮动：左；
边缘顶部：300px；
不透明度：0；
}
#跑{
}

运行效应
测试
测试
测试
测试
测试
您可以在不排队的情况下设置动画（同时）：

工作代码：


$（'#运行'）。单击（函数（）{
$（'.fade-in-post-container.elementor-post'）.animate（{opacity:1}，{duration:4000，queue:false}）；
$（'.fade-in-post-container.elementor-post'）.animate（{marginTop:0}，{duration:2000，queue:false}）；
});
。淡入邮件容器{
}
.淡入式邮政集装箱。elementor邮政{
宽度：25%；
高度：50px；
显示：块；
利润率：1%；
边框：1px实心#000；
浮动：左；
边缘顶部：300px；
不透明度：0；
}
#跑{
}

运行效应
测试
测试
测试
测试
测试
您可以只使用CSS而不使用jQuery。如果下面的效果是你想要的。希望能有帮助


正文{
背景色：黑色；
保证金：0；
}
.淡入邮筒{
显示器：flex；
证明内容：中心；
柔性包装：包装；
宽度：300px；
}
埃利门托邮政公司{
位置：相对位置；
边框：1px纯红；
颜色：白色；
宽度：100%；
填充：10px；
文本对齐：居中；
动画：fadeIn 1s线性；
动画填充模式：两者都有；
}
.elementor职位：第n名子女（1）{
动画延迟：1s；
}
.elementor职位：第n个孩子（2）{
动画延迟：2s；
}
.elementor职位：第n个孩子（3）{
动画延迟：3s；
}
.elementor职位：第n个孩子（4）{
动画延迟：4s；
}
.elementor职位：第n个孩子（5）{
动画延迟：5s；
}
@-webkit关键帧fadeIn{
0% {
不透明度：0；
顶部：100px；
}
75% {
不透明度：0.5；
顶部：0px；
}
100% {
不透明度：1；
}
}

测试
测试
测试
测试
测试
您可以只使用CSS而不使用jQuery。如果下面的效果是你想要的。希望能有帮助


正文{
背景色：黑色；
保证金：0；
}
.淡入邮筒{
显示器：flex；
证明内容：中心；
柔性包装：包装；
宽度：300px；
}
埃利门托邮政公司{
位置：相对位置；
边框：1px纯红；
颜色：白色；
宽度：100%；
填充：10px；
文本对齐：居中；
动画：fadeIn 1s线性；
动画填充模式：两者都有；
}
.elementor职位：第n名子女（1）{
动画延迟：1s；
}
.elementor职位：第n个孩子（2）{
动画延迟：2s；
}
.elementor职位：第n个孩子（3）{
动画延迟：3s；
}
.elementor职位：第n个孩子（4）{
动画延迟：4s；
}
.elementor职位：第n个孩子（5）{
动画延迟：5s；
}
@-webkit关键帧fadeIn{
0% {
不透明度：0；
顶部：100px；
}
75% {
不透明度：0.5；
顶部：0px；
}
100% {
不透明度：1；
}
}

测试
测试
测试
测试
测试
我不知道这正是您想要的，但请查看此示例

我不知道这正是你想要的，但看看这个例子

如果你想简化东西，你可以使用框架ScrollReveal，Krishanu-但我不认为这会简化事情-我觉得我快到了，只是缺少了一个重要的部分…然后你可以尝试通过jQuery添加类，而不是更改属性。如果你想简化东西，你可以使用框架ScrollReveal，Krishanu-但我不认为这会简化事情-我觉得我快到了，只是缺少了一个重要的部分…然后你可以尝试通过jQuery添加类，而不是更改属性。谢谢，Oscargeek-这看起来只是淡出所有内容，但没有“滑入”。使用
动画（{height:0}）
应该与slideUp具有相同的效果，确保不起作用吗？抱歉，Oscargeek-当我单击“运行代码片段”时，所有测试文本立即出现？是的，然后您可以在每个项目中单击以同时查看slideUp（）和fadeOut（）。我猜这是对一个事件的影响，不是吗？这只是为了检查工作，你可以在你喜欢的地方执行。我不是很好地解释自己，抱歉-如果你去这里：点击其中一个过滤器，你会看到博客帖子一个接一个地消失和滑动。。。这就是我想要达到的效果，Ocargeek，Ocargeek-看起来这只是淡出所有内容，但没有“滑入”。使用
animate（{height:0}）
应该与slideUp具有相同的效果，确保不起作用？抱歉，Ocargeek-当我单击运行代码段时，所有测试文本都会立即出现？是的，然后，您可以单击每个项目以同时查看slideUp（）和fadeOut（）。我猜这是对一个事件的影响，不是吗？这只是为了检查工作，你可以在你喜欢的地方执行。我不是很好地解释自己，抱歉-如果你去这里：点击其中一个过滤器，你会看到博客帖子一个接一个地消失和滑动。。。这就是我想要实现的，嗯
jQuery(".fade-in-post-container .elementor-post").each(function(i) {
    jQuery(this).delay(500 * i).fadeIn(1000);
});

jQuery(".fade-in-post-container .elementor-post").each(function(i) {
    jQuery(this).delay(250 * i).fadeIn(1000).slideUp(1000);
});

jQuery(this).animate({ opacity: 0 }, { duration: 1000, queue: false });
jQuery(this).animate({ height: 0 }, { duration: 1000, queue: false });

jQuery(".fade-in-post-container .elementor-post").each(function(i) {
    jQuery(this).delay(250 * i).fadeIn(1000,function() {
            $(this).delay(250 * i).slideUp(1000)
        });
});