title: Jquery Delay for on scroll
body: <p>Hi I have set of icons that I want to display one by one when it scroll down.</p>
  
  <p>I used <a href="http://www.justinaguilar.com/animations/" rel="nofollow noreferrer">http://www.justinaguilar.com/animations/</a> for the animations.</p>
  
  <p>How can I add the delay function on my jquery so it will be visible one by one?
  Any plugins that can alternate this kind of effect?</p>
  
  <p>Any suggestions?</p>
  
  <p>Thanks guys</p>
  
  <p><img src="https://i.stack.imgur.com/tgLQq.png" alt="enter image description here"></p>
  
  <p>html code</p>
  
  <pre><code>     &lt;div id="create" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20"&gt;
                      &lt;img src="//placehold.it/80x80" alt="folder" class="img-circle"&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                      &lt;i class="fa fa-user fa-5x m-t10"&gt;&lt;/i&gt;
                      &lt;h4&gt;Create an account&lt;/h4&gt;
                  &lt;/div&gt;
  
                  &lt;div id="define" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20"&gt;
  
                      &lt;img src="//placehold.it/80x80" alt="folder" class="img-circle"&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                      &lt;i class="fa fa-pencil-square-o fa-5x m-t10"&gt;&lt;/i&gt;
                      &lt;h4&gt;Define your API&lt;/h4&gt;
  
                  &lt;/div&gt;
  
                  &lt;div id="sync" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20"&gt;
  
                      &lt;img src="//placehold.it/80x80" alt="folder" class="img-circle"&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                      &lt;i class="fa fa-refresh fa-5x m-t10"&gt;&lt;/i&gt;
                      &lt;h4&gt;Sync the local client&lt;/h4&gt;
  
                  &lt;/div&gt;
  
                  &lt;div id="cloud" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20" &gt;
  
                      &lt;img src="//placehold.it/80x80" alt="folder" class="img-circle"&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                      &lt;i class="fa fa-cloud fa-5x m-t10"&gt;&lt;/i&gt;
                      &lt;h4&gt;Get data from the cloud&lt;/h4&gt;
  
                  &lt;/div&gt;
  
                  &lt;div id="scale" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20"&gt;
  
                      &lt;img src="//placehold.it/80x80" alt="folder" class="img-circle"&gt;
                      &lt;div class="clear"&gt;&lt;/div&gt;
                      &lt;i class="fa fa-bar-chart-o fa-5x m-t10"&gt;&lt;/i&gt;
                      &lt;h4&gt;Scale as required&lt;/h4&gt;
  
                  &lt;/div&gt;
  </code></pre>
  
  <p>css code</p>
  
  <pre><code>#create, #define, #sync, #cloud, #scale
  {
    visibility:hidden;
  }
  </code></pre>
  
  <p>jquery code</p>
  
  <pre><code>$(window).scroll(function () {
      $('#kinect-logo').each(function () {
          var imagePos = $(this).offset().top;
          var topOfWindow = $(window).scrollTop();
          if (imagePos &lt; topOfWindow + 400) {
              $(this).addClass("slideUp");
          }
      });
      $('#create').each(function () {
          var imagePos = $(this).offset().top;
          var topOfWindow = $(window).scrollTop();
          if (imagePos &lt; topOfWindow + 400) {
              $(this).delay(300).addClass("fadeIn");
          }
      });
      $('#define').each(function () {
          var imagePos = $(this).offset().top;
          var topOfWindow = $(window).scrollTop();
          if (imagePos &lt; topOfWindow + 400) {
              $(this).addClass("fadeIn");
          }
      });
  
      $('#sync').each(function () {
          var imagePos = $(this).offset().top;
          var topOfWindow = $(window).scrollTop();
          if (imagePos &lt; topOfWindow + 400) {
              $(this).addClass("fadeIn");
          }
      });
  
      $('#cloud').each(function () {
          var imagePos = $(this).offset().top;
          var topOfWindow = $(window).scrollTop();
          if (imagePos &lt; topOfWindow + 400) {
              $(this).addClass("fadeIn");
          }
      });
  
      $('#scale').each(function () {
          var imagePos = $(this).offset().top;
          var topOfWindow = $(window).scrollTop();
          if (imagePos &lt; topOfWindow + 400) {
              $(this).addClass("fadeIn").delay(300);
          }
      });
  });
  </code></pre>