Select contents of div to fadeIn sequentially

Vote count:

0

I'm not sure the best way to word this, so hopefully this makes sense.

Currently, on my page, all my elements fadeIn on click. What I would like is for only select elements in an id (#seqFade below) to fade in on their own one after the other.

I've figured out how to make both of these effects work on separate pages, but I can't figure out how to have them both occur on the same page / combine the two.

Here is more or less how my page is designed, and below is what I have so far for code.

HTML

<div id="content">

   <div class="fadeIn">
      <p>Hello</p>
   </div>

   <div class="fadeIn" id="seqFade">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

    <div class="fadeIn">
       Bye.
    </div>

</div>

SCRIPT

$(document).ready(function(){

//hides all fadeIns 
    $('.fadeIn').hide();

$(document).on('click',function() {
    if('#seqFade') {
//sequential fade in function (works)
          $('span').each(function(i) {
            $(this).delay(i*300).fadeIn('slow');
        });
    }

//fadeIn on click (works)
   $('.fadeIn:hidden:first').fadeIn('slow');
})
.click();

Thank you so much in advance.

asked 20 secs ago

Tuck

8

Select contents of div to fadeIn sequentially