title: Jquery Waypoints fadeIn and animate
body: <p>I am currently working on a project that needs a few jquery functions which seem to be too complex to build for me, so I hope anyone here might have some solutions for me.</p>
  
  <p>I am working on a one page scroll site and I already impleneted some functions using jquery and waypoints.</p>
  
  <p>Here is the link to the current version of the project: <a href="http://art-design.de/onlineprospekt/demo/" rel="nofollow">http://art-design.de/onlineprospekt/demo/</a></p>
  
  <p>If you scroll down a bit to the first big kitchen image, where you have a color change function underneath, you will recognize a mouse-cursor icon that starts to move up and down after you scroll to it. I created this function with waypoints with the following function:</p>
  
  <p>JS:</p>
  
  <pre><code>&lt;!--Moving finger waypoints start --&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('.finger_1').waypoint(function() {
          setInterval(function(){
              $('.finger_1').animate({ top: '-=12px' }, 500);
              $('.finger_1').animate({ top: '+=12px' }, 500);
          }, 1300);
      }, {offset: '70%',  triggerOnce: true });
  });
  &lt;/script&gt;
  
  &lt;!--Moving fingers waypoints end --&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;img class="pageItem finger_1" src="assets/images/item_18171.png" alt="hand 1" style="left:239px;top:1410px;"/&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.pageItem {
  box-sizing: border-box;
  display: block;
  height: auto !important;
  width: auto !important;}
  </code></pre>
  
  <p>Now this kinda seems to work, but I am not satisfied with it, yet and I would like to add some more to this function. What I would like to achieve is, that the finger is not visible, but fades in after you scroll to that waypoint with offset '70%' and starts the animation from there as well.
  As you can see, I somehow managed to get the animation to work, using some code that I found here on SO, but I am not satisfied yet and it looks like I can't get the fadein to work.</p>
  
  <p>And in addition to all that, I need to do this do the same for all the finger images that are on the site if you scroll a bit further</p>
  
  <pre><code>&lt;img class="pageItem finger_1" src="assets/images/item_18171.png" alt="hier klicken" style="left:239px;top:1410px;"/&gt;
  &lt;img class="pageItem finger_2" src="assets/images/item_18171.png" alt="hier klicken" style="left:703px;top:1440px;"/&gt;
  &lt;img class="pageItem finger_3" src="assets/images/item_18171.png" alt="hier klicken" style="left:408px;top:2641px;"/&gt;
  &lt;img class="pageItem finger_4" src="assets/images/item_18171.png" alt="hier klicken" style="left:438px;top:3371px;"/&gt;
  &lt;img class="pageItem finger_5" src="assets/images/item_18171.png" alt="hier klicken" style="left:643px;top:4433px;"/&gt;
  </code></pre>
  
  <p>So there are five fingers that should be animated. How can I combine the function?
  Any ideas?</p>