title: Re-animating in slide when navigated to: JavaScript
body: <p>I have a one page website which makes use of full-screen slides(powered by <a href="http://github.com/alvarotrigo/fullPage.js" rel="nofollow">fullPage.js</a>).</p>
  
  <p>I have this script running to animate some text when the page first loads (the first page is the one with animation)
  Im fairly new to JS so I was wondering how I would make it perform the animation every-time the user navigates to the slide?</p>
  
  <p><code>JS</code>:
      </p>
  
  <pre><code>    $(document).ready(function() {
          $.fn.fullpage({
              slidesColor: ['#161616', '#161616'],
              anchors: ['', 'Bye']});
  
          $(".test").each(function(i) {
              $(this).delay(i*600).animate({ opacity: 1 }, 700)
          });         
      });
  &lt;/script&gt;    
  </code></pre>
  
  <p>It just animates three <code>spans</code>. 
  I'd like it to animate them again when I navigate back to the slide. Also how do I get it to set the <code>opacity</code> = 0 when navigated to another slide?(so that it can be reanimated</p>
  
  <p><code>HTML</code>:</p>
  
  <pre><code>&lt;div class="section active" id="section0"&gt;
  &lt;h1&gt;?&lt;/h1&gt;
  &lt;h2&gt;&lt;span class="test"&gt;1.&lt;/span&gt; &lt;span class="test"&gt;2.&lt;/span&gt; &lt;span class="test"&gt;3.&lt;/span&gt;&lt;/h2&gt;
  &lt;a  onclick="javascript:window.location='#CV';"&gt;&lt;img class="downArrow" src="images/arrow.svg"/&gt;&lt;/a&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><code>CSS</code> for <code>.test</code>:</p>
  
  <pre><code>   .test{
         opacity: 0;
     }
  </code></pre>