title: jQuery animations in Flexbox - animation not running
body: <p>I've created a grid of square divs using Flexbox to replicate a print image and want each square to slide down from the top of the highest container div when the page scrolls to a certain point. This isn't firing though I know the browser is getting the .scroll function because I have a console log running. I've been working to just get one div to slide at this point. Is Flexbox super strict or am I missing something? Here is the code. </p>
  
  <pre><code>&lt;script&gt;
    $(document).ready(function(){
        $( this ).scroll(function() {
          if ($(this).scrollTop() &gt; 50){
          $( "#small-twelve" ).slideDown( 5000, function(){
            console.log("scrolled!")
          })
          };
        });
      });
  &lt;/script&gt;    
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="square-container"&gt;
              &lt;div class="square-smalls-container"&gt;
                &lt;div class="small-eleven"&gt;
                  &lt;div class="text"&gt;
                    &lt;h3&gt;+63.5%&lt;/h3&gt;
                    &lt;p&gt;more computer &amp;amp; data processing &lt;br/&gt; services&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="small-twelve" id="small-twelve"&gt;
                  &lt;div class="text"&gt;
                    &lt;h3&gt;+49.0%&lt;/h3&gt;
                    &lt;p&gt;other freight &amp;amp; &lt;br/&gt;port services&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
                &lt;div class="long-one"&gt;
                  &lt;div class="text"&gt;
                    &lt;h3&gt;+247.9%&lt;/h3&gt;
                    &lt;p&gt;more film &amp;amp; television &lt;br/&gt;distribution services&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.square-smalls-container{
          flex-direction: row;
          display: flex;
          flex: 2;
          box-sizing: border-box;
          position: relative;
        }
  .small-one, .small-two, .small-three, .small-four, .small-five, .small-six, .small-seven, .small-eight, .small-nine, .small-ten, .small-eleven, .small-twelve{
          display: flex;
          box-sizing: border-box;
          padding: 10px;
          flex-basis: 18%;
          margin: 0 auto;
          position: relative;
        }
  
  .small-eleven, .small-twelve{
          flex: 1;
          margin-left: 2%;
          margin-right: 2%;
        }
  </code></pre>