如果少于3个div，则显示其他div

Question

我正在使用jQuery在具有相同类“ noti_box”的所有div中逐渐消失。 这些实际上是通知框，用户可以关闭其中一个或所有框。 我想做的是找到一种方法来通过使用jquery在其位置显示另一个div来补偿封闭的div。

因此，如果显示3个通知框/'noti_box'div，并且用户关闭其中一个，我希望jquery显示一个不同的div，'other_div'来填充关闭的div的空间。 如果用户关闭3个中的2个，则相同，则应显示2个“ other_divs”，依此类推。

我需要找到一种方法，仅在每个“ noti_box” div消失后才能执行此操作，因为它们需要大约2到3秒的时间才能淡入，所以不希望显示div来填补空白，而另一个div仍然试图淡入淡出。 因此仅在用户关闭div时才需要。

目前，这是我的代码，希望有人可以提供帮助，并告诉我即时通讯出了问题

<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

为什么不把它放在这里呢？

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

然后，每次关闭另一个打开。

Answer 2

我认为这可能是您要寻找的：

<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

你可以尝试做这样的事情

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");
    }