需要在插入新的 div 时将 div 向下推。我在 codepen 中有这段代码.
现在div一个接一个插入,但我需要被推。
$('.dashdiv').each(function(i) {
$(this).fadeOut(1).delay(1000 * i).fadeIn(1850);
});
.dashdiv {
background: grey;
margin: 5px;
width: 200px;
color: #fff;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashdiv">1 - One</div>
<div class="dashdiv">2 - Two</div>
<div class="dashdiv">3 - Three</div>
<div class="dashdiv">4 - Four</div>
<div class="dashdiv">5 - Five</div>
<div class="dashdiv">Need push DOWN</div>
最佳答案
我用 display:flex
和 flex-direction:column-reverse
制作
$('.dashdiv').each(function(i) {
$(this).fadeOut(1).delay(1000*(i)).fadeIn(1850);
});
.dashdiv { background:grey; margin:5px; width:200px; color:#fff; padding: 10px;}
.flex {
display:flex;
flex-direction:column-reverse;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="flex">
<div class="dashdiv">1 - One</div>
<div class="dashdiv">2 - Two</div>
<div class="dashdiv">3 - Three</div>
<div class="dashdiv">4 - Four</div>
<div class="dashdiv">5 - Five</div>
<div class="dashdiv">Need push DOWN</div>
</div>
关于javascript - 需要div被下推,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54221692/