Question

希望有人可以提供帮助...目前，我在Wordpress中有一组帖子/ div，我已经设置为使用jQuery逐渐淡入淡出。

本质上像这里的这些帖子：https://undsgn.com/uncode/blog/blog-boxed-grid?id=index-15588655905&ucat=7当您单击过滤器时，它们都会淡入并逐个向上滑动。

我想在此添加slideUp效果，以便同时向上滑动和淡入。我正在努力添加第二个效果，但结果却无法预测。

到目前为止，我的代码如下：

HTML

<div class="fade-in-post-container">
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
</div>

CSS

.elementor-post {float:left; margin-right:20px;}
.fade-in-post-container .elementor-post { display: none; }

jQuery

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

这是一个jsFiddle：https://jsfiddle.net/shan_2000_uk/kugc7m61/16/

我已经尝试过：

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

和其他几件事，但我似乎无法使其正常运行...

非常感谢您抽出宝贵的时间来查看。

Answer 1

您可以仅使用CSS而无需jQuery来执行此操作。如果下面的效果是您想要的。希望对您有所帮助。

body {
  background-color: black;
  margin: 0;
}

.fade-in-post-container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 300px;
}


.elementor-post {
  position: relative;
  border: 1px solid red;
  color: white;
  width: 100%;
  padding: 10px;
  text-align: center;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;
}

.elementor-post:nth-child(1) {
  animation-delay: 1s;
}

.elementor-post:nth-child(2) {
  animation-delay: 2s;
}

.elementor-post:nth-child(3) {
  animation-delay: 3s;
}

.elementor-post:nth-child(4) {
  animation-delay: 4s;
}

.elementor-post:nth-child(5) {
  animation-delay: 5s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    top: 100px;
  }
  75% {
    opacity: 0.5;
    top: 0px;
  }
  100% {
    opacity: 1;
  }
}

<div class="fade-in-post-container">
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
</div>

Answer 2

我不知道这正是您要查找的内容，但是请查看此jsfiddle示例。

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

Answer 3

您可以同时制作动画，而无需排队：

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

工作代码：

$('#run').click(function() {
  $('.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 });
});

.fade-in-post-container {

}

.fade-in-post-container .elementor-post {
  width: 25%;
  height: 50px;
  display: block;
  margin: 1%;
  border: 1px solid #000;
  float: left;
  margin-top: 300px;
  opacity: 0;
}

#run {

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="run">Run effect</button>

<div class="fade-in-post-container">
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
  <div class="elementor-post">test</div>
</div>

带有延迟的jQuery fadeIn和slideUp

3 个答案: