javascript - Fade in arbitrary number of text lines sequentially with jquery queue -

this gets pretty specific i'd able fade in arbitrary number of children sequentially , delayed timing using jquery queue (though i'm open other methods). here have working already.

this basic html block i'm working with

<header>   <p class="copy">thing one</p>   <p class="copy">thing two</p>   <p class="copy">cat in hat</p> </header> 

this current jquery works, feels hacky me in need know in advance how many nodes expect.

var $screenheader = $('header'); $screenheader.queue(function () {   $screenheader.find('.copy:nth-child(1)').addclass('visible');   $(this).dequeue(); }) .delay(1500) .queue(function () {   $screenheader.find('.copy:nth-child(2)').addclass('visible');   $(this).dequeue(); }) .delay(1500) .queue(function () {   $screenheader.find('.copy:nth-child(3)').addclass('visible');   $(this).dequeue(); }) .delay(1500); 

i love if worked

for (var = 1; < $screenheader.children().length+1; i++) {             $screenheader.queue(function () {     $screenheader.find('.copy:nth-child('+i+')').addclass('visible');     $screenheader.dequeue();   }).delay(1500); } 

or better yet

$screenheader.children().each(function (i) {   $screenheader.queue(function () {     $screenheader.find('.copy:nth-child('+i+')').addclass('visible');     $screenheader.dequeue();   }).delay(1500);  }); 

or more betterer (then i'm done, promise)

$screenheader.children().each(function () {   $screenheader.queue(function () {     $(this).addclass('visible');     $screenheader.dequeue();   }).delay(1500);  }); 

now, know there's funkiness how $(this) passed around last 1 isn't priority, nice sort of loop working. listing them out , repeating code , being tied html kills me.

help appreciated. :)

why not this:

var $elements = $('header').find('.copy'); $($elements).each(function(i, ui){     settimeout(function(){         $(ui).addclass('visible');     },(i*1500)); });