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

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

3 个答案: