title: Fullpage.js call function in a conditional statement
body: <p>I have code <a href="https://jsfiddle.net/unwzq6q6/16/" rel="nofollow noreferrer">here</a>: </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>$('#fullpage').fullpage({
   
    afterLoad: function(anchorLink, index){ 
    
    
     if(index == 1){ 
      
         var $squares = $('.grid-container div');
  
          function imgFade() {
  
            $squares.removeClass('active')
  
            //Choose 2 random divs
            var square1 = $squares.eq([Math.floor(Math.random()*$squares.length)]) 
            var square2 = $squares.eq([Math.floor(Math.random()*$squares.length)])
  
            //Assign active class
            $([square1, square2]).each( function(){
              $(this).addClass('active');
            });
  
            setTimeout(imgFade, 2000);
          }
  
          imgFade(); 
        
       } else {
          return false;
        }
  
   
      
      
      
   }
  }); //end fullpage</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {margin:0}
  
  section {
    height:100vh;
    width:100%;
  }
  
  .grid-container {width:100%;}
  
  .grid-container div {
    width:20vw;
    height:33.33vh;
    float:left;
    background: purple;
    opacity: 1;
    border:1px solid white;
    transition: opacity 3s ease;
  }
  
  div.active {opacity: 0.5;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.min.js"&gt;&lt;/script&gt;
  &lt;div id="fullpage"&gt;
  
    &lt;section id="section0" class="section"&gt;
      &lt;div class="grid-container"&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
    &lt;section id="section1" class="section"&gt;
      Some stuff
    &lt;/section&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to execute a function using Fullpage.js when the index (section) is equal to 1. I want the function to stop or pause when the user scrolls to the next section. When I inspect element, I can see the function is still running when I'm no longer on index 1 (the boxes are still changing color), even though I have the function wrapped in a conditional statement.</p>
  
  <p>So I'd like to know how I can only run the function on the first section (index 1), and stop/pause on the other section. </p>