Jquery: Fade in multiple divs with same class one by one but only ever show a max of 2 at a time? -
i using following jquery code fade in multiple divs same class 1 one. works fine , want remain same.
however, end 30 occurences of div go way down page so:
div div div div div div
what want there ever max of 2 divs visible @ 1 time. still want divs fade in 1 one, have max of 2 on show @ time. if user closes first top div instance next div fade in.
result:
div div <---- if close, next div fades in replace (div waiting fade in when 1 of first 2 divs closed) etc
code:
<script> $(document).ready(function(){ var animations = []; $('.noti_box').each(function(i) { animations.push( $(this).hide().delay(i * 1000).fadein(1500).promise() ); }); $.when.apply($, animations).done(function () { time=setinterval(function(){ if ( $('.noti_box:visible').length === 0 ) { $(".advert").fadein("slow"); } },200); }); }); </script>
jsfiddle:
try fadein() using selector , .next() selects next div. example:
$(".fade").not(".fade:last").click( function() { $(this).fadeout("slow"); $(this).next().fadein("slow"); } ); $(".fade:last").click( function() { $(this).fadeout("slow"); $(".fade:first").fadein("slow"); } );
div { width: 8px; border: solid black 1px; padding: 10px; position: absolute; } div:hover { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fade"> 1 </div> <div class="fade" style="display:none"> 2 </div> <div class="fade" style="display:none"> 3 </div> <div class="fade" style="display:none"> 4 </div> <div class="fade" style="display:none"> 5 </div> <div class="fade" style="display:none"> 6 </div> <div class="fade" style="display:none"> 7 </div> <div class="fade" style="display:none"> 8 </div>
Comments
Post a Comment