If there are less than 3 divs then show other div

Question

i am fading in multiple divs all with the same class 'noti_box' using jquery. these are essentially notification boxes, and a user can close one or all of these boxes. what i am trying to do is find a way to compensate for the closed divs by showing another div in its place using jquery.

so if there are 3 notification boxes / 'noti_box' divs showing, and a user closes one of these, i want jquery to show a different div, 'other_div' to fill the space of the closed div. same if the user closes 2 of 3 then 2 'other_divs' should be shown and so on.

i need to find a way of being able to do this only after each 'noti_box' div has faded in, as they take about 2 to 3 seconds to fade in and so dont want divs being shown to fill gaps whilst the other div is still trying to fade in still. so needs to be only when a user closes the div.

heres my code at the moment, hope someone can help and show me where im going wrong

<div class="right_panel_outer">
<div class="right_panel">
    <a href="notifications.php" rel="shadowbox;height=700;width=1100" class="link1"><div class="noti_box"><div class="noti_text"><h4>You have 11 New Messages</h4></div></a><div class="close_box"></div></div>
    <div class="noti_box"><div class="noti_text"><h4>You have 11 New Notifications</h4></div><div class="close_box"></div></div>
    <div class="noti_box"><div class="noti_text"><h4>6 Matters Needing Your Attention</h4></div><div class="close_box"></div></div>
    <div class="noti_box"><div class="noti_text"><h4>3 Insurance Due To Expire Today</h4></div><div class="close_box"></div></div>
    <div class="noti_box"><div class="noti_text"><h4>1 Outstanding Application</h4></div><div class="close_box"></div></div>
    <div class="other_div">HELLO</div>
    <div class="other_div">HELLO</div>
</div>        
</div>


 <script type="text/javascript">
$('.noti_box').each(function(i) {
    $(this).hide().delay(i * 1500).fadeIn(1500);
});

$('.close_box').on('click', function() {
    $(this).closest('.noti_box').fadeOut();
});
</script>

<script>
    $('.other_div').hide();
     if ($('.noti_box').length  < 3) {

                $('.other_div').show("fast");
            }
</script>

Answer 1

Why not just place it here?

$('.noti_box').each(function(i) {
    $(this).hide().delay(i * 1500).fadeIn(1500);
    $('.other_div').show("fast");
});

Then one is opened every time another is closed.

Answer 2

I think this might be what you are looking for:

<script type="text/javascript">
$('.noti_box').each(function(i) {
    $(this).hide().delay(i * 1500).fadeIn(1500);
});

$('.close_box').on('click', function() {
    $(this).closest('.noti_box').fadeOut(function() {  //is called once fadeOut completes
        $(".other_div:hidden:first").show() //gets the other divs that are hidden, then selects the first one and shows it
    });
 });
</script>

<script>
     $('.other_div').hide();
 </script>

Answer 3

You could try doing something like this

http://jsfiddle.net/acidrat/Fnya8/1/

$('.noti_box').each(function(i) {
    $(this).toggleClass('fading');
    $(this).hide().delay(i * 1500).fadeIn(1500, function() {
        $(this).toggleClass('fading');
    });
});

$('.close_box').on('click', function() {
    if ($(".noti_box.fading").size() <= 0) {
        $(this).closest('.noti_box').fadeOut();
    }

});

$('.other_div').hide();
    if ($('.noti_box').length  < 3) {
        $('.other_div').show("fast");
    }