jQuery fadeIn Div() 和 Flexbox

Question

当我的 workitem 淡入时，起始位置在中心，然后在显示新的时向左移动。我想按原样生成它们，从左到右不动。

$('.workitem').each(function(fadeInDiv){
  $(this).delay(fadeInDiv *1500).fadeIn(5000);
});

#work {
  justify-content:center;
  align-items:flex-start;
  width:70%;
  height:70%;
  background-color:black;
  display:flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="work">
  <div class="workitem"></div>
  <div class="workitem"></div>
  <div class="workitem"></div>
  <div class="workitem"></div>
</div>

Answer 1

使用 fadeIn() 设置元素的显示，这不是您想要的。 你想将元素保留在那里(隐藏)但只是显示它。

所以你可以考虑使用 fadeTo()只影响元素的不透明度 也许是这样的:

$('.workitem').css("opacity","0").each(function(fadeInDiv){

 $(this).delay(fadeInDiv*1500).fadeTo("slow", 1);

});

bootply 示例:https://www.bootply.com/v9AtAQmDRR