Fade in p tags one by one

Question

Let's say I've got few p tags:

<p>Style never met and those among great. At no or september sportsmen he perfectly happiness attending. Depending listening delivered off new she procuring satisfied sex existence. Person plenty answer to exeter it if. Law use assistance especially resolution cultivated did out sentiments unsatiable. Way necessary had intention happiness but september delighted his curiosity. Furniture furnished or on strangers neglected remainder engrossed.</p>

<p>Not far stuff she think the jokes. Going as by do known noise he wrote round leave. Warmly put branch people narrow see. Winding its waiting yet parlors married own feeling. Marry fruit do spite jokes an times. Whether at it unknown warrant herself winding if. Him same none name sake had post love. An busy feel form hand am up help. Parties it brother amongst an fortune of. Twenty behind wicket why age now itself ten.</p>

<p>For though result and talent add are parish valley. Songs in oh other avoid it hours woman style. In myself family as if be agreed. Gay collected son him knowledge delivered put. Added would end ask sight and asked saw dried house. Property expenses yourself occasion endeavor two may judgment she. Me of soon rank be most head time tore. Colonel or passage to ability.</p>

which are opacity:0 and I want to fade in them, one by one , with delay of, say 350ms.

How would I do that?

All my attempts

$.each($('p'), function(index,element){
    setTimeout(function(){ $(element).fadeIn(); }, 350);
});

ended up fading in all p tags in same time.

Answer 1

This should do:

$("p").each(function(index) {
    $(this).delay(350*index).fadeOut(300);
});

Answer 2

The reason they are all going at the same time is that the timeouts are all set at almost the same time. meaning they will all wait 350 seconds from the time the each is run.

Try this

ps = $('p').toArray();

function fadeNext(ps){
   $(ps[0]).fadeIn(350, function(){
      ps.shift();
      if(ps.length){
         fadeNext(ps);
      }
   })
}

Here is a code snippet with it fading out:

 function fadeNext(ps) { console.log($(ps[0])) $(ps[0]).fadeOut(350, function() { ps.shift(); if (ps.length) { fadeNext(ps); } }) } $('#fade_button').click(function() { ps = $('p').toArray(); fadeNext(ps); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Style never met and those among great. At no or september sportsmen he perfectly happiness attending. Depending listening delivered off new she procuring satisfied sex existence. Person plenty answer to exeter it if. Law use assistance especially resolution cultivated did out sentiments unsatiable. Way necessary had intention happiness but september delighted his curiosity. Furniture furnished or on strangers neglected remainder engrossed.</p> <p>Not far stuff she think the jokes. Going as by do known noise he wrote round leave. Warmly put branch people narrow see. Winding its waiting yet parlors married own feeling. Marry fruit do spite jokes an times. Whether at it unknown warrant herself winding if. Him same none name sake had post love. An busy feel form hand am up help. Parties it brother amongst an fortune of. Twenty behind wicket why age now itself ten.</p> <p>For though result and talent add are parish valley. Songs in oh other avoid it hours woman style. In myself family as if be agreed. Gay collected son him knowledge delivered put. Added would end ask sight and asked saw dried house. Property expenses yourself occasion endeavor two may judgment she. Me of soon rank be most head time tore. Colonel or passage to ability.</p> <button id="fade_button">try it</button>

Answer 3

Try this one:

$("p").each(function(index) {
   $(this).delay(350*index).animate({opacity:1});
});