jquery：逐个淡入div与div相同？ [英] jquery: fade in div with same div class one by one?

问题描述

我试图找到一种使用jquery逐个淡化多个div同一个div类的方法，有人可以告诉我该怎么做吗？到目前为止，我所有的div都会立刻淡化它，因为它们都具有相同的div类，但是我已经看到这样做之前，具有相同类的多个div可以一个接一个地逐渐消失/一个接一个地延迟2秒延迟？

i am trying to find a way of fading in multiple divs with the same div class one by one using jquery, can anyone please show me how to do this? so far all my divs fade it at once because they all have the same div class but i have seen this done before where multiple divs with the same class can be faded in one after the other/ one by one with a short 2 second delay?

我试图淡入的div被称为'noti_box'

the divs i am trying to fade in are called 'noti_box'

<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><div class="close_box"></div></div></a>
    <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>

 <script type="text/javascript">
    $('.noti_box').hide().fadeIn(1500);
    $('.noti_box').hide().fadeIn(1500);
    $('.noti_box').hide().fadeIn(1500);
</script>

推荐答案

使用 延迟 ：

$('.noti_box').each(function(i) {
    // 'i' stands for index of each element
    $(this).hide().delay(i * 3500).fadeIn(1500);
});

DEMO： http://jsfiddle.net/F39TV/1/

这篇关于jquery：逐个淡入div与div相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！