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?

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>
user3608209
  • 45
  • 6

1 Answers1

7

Use delay:

$('.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/

VisioN
  • 143,310
  • 32
  • 282
  • 281
  • 1
    +1: but don't forget the `2 second` delay between fades they suggested `(i * 3500)` for a 1.5 second fade. – iCollect.it Ltd May 07 '14 at 13:45
  • thanks but this doesnt seem to be working for me, it just seems to hide the third div out of the three of them – user3608209 May 07 '14 at 13:45
  • You could hide those w/ CSS beforehand `.noti_box { display: none; }` and then do `$(this).delay(i * 3500).fadeIn(1500);` – rorofromfrance May 07 '14 at 13:46
  • @VisioN would it also be possible to hide each of these divs seperatley by clicking another div called 'close_box' which acts as a close button for each div? (obviously still bearing in mind that each div would have the same class, can i somehow target each parent click to close the parent div or something? – user3608209 May 07 '14 at 13:59
  • How did `i` become index? Simply by declaring it in the function `function(i)`? – timo May 07 '14 at 14:01
  • 1
    @user3008011 According to the [docs](http://api.jquery.com/each/) callback receives index as its first argument. – VisioN May 07 '14 at 14:02
  • @user3608209 It is possible, why not? One possible solution: http://jsfiddle.net/F39TV/3/. – VisioN May 07 '14 at 14:07