title: Animate one paragraph at a time
body: <p>I have a div with several paragraphs inside of it. I want each of these paragraphs to fade in one after the other. I can do that with the following code. However, since I will have many more divs with many other paragraphs, each with their unique class names, I wonder if there is an easier way to achieve this, without keep copy-pasting the code, changing the class names each time.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.line1').css('visibility','visible').hide().fadeIn(1000, function(){
    $('.line2').css('visibility','visible').hide().fadeIn(1000, function(){
      $('.line3').css('visibility','visible').hide().fadeIn(1000, function(){
        $('.line4').css('visibility','visible').hide().fadeIn(1000);
      });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.line1, .line2, .line3, .line4 {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="div1"&gt;
    &lt;p class="line1"&gt;Text 01&lt;/p&gt;
    &lt;p class="line2"&gt;Text 02&lt;/p&gt;
    &lt;p class="line3"&gt;Text 03&lt;/p&gt;
    &lt;p class="line4"&gt;Text 04&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>