[英]Need divs to be push down
Need divs to be pushed down when new div is inserted. 插入新div时需要按下div。 I have this code in codepen .
我在codepen中有这个代码。
Right now the divs are inserted one after another, but I need then to be pushed. 现在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>
I made with display:flex
and flex-direction:column-reverse
我用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.