Jquery Waypoints fadeIn and animate

Question

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.

I am working on a one page scroll site and I already impleneted some functions using jquery and waypoints.

Here is the link to the current version of the project: http://art-design.de/onlineprospekt/demo/

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:

JS:

<!--Moving finger waypoints start -->

<script type="text/javascript">
$(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 });
});
</script>

<!--Moving fingers waypoints end -->

HTML

<img class="pageItem finger_1" src="assets/images/item_18171.png" alt="hand 1" style="left:239px;top:1410px;"/>

CSS

.pageItem {
box-sizing: border-box;
display: block;
height: auto !important;
width: auto !important;}

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.

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

<img class="pageItem finger_1" src="assets/images/item_18171.png" alt="hier klicken" style="left:239px;top:1410px;"/>
<img class="pageItem finger_2" src="assets/images/item_18171.png" alt="hier klicken" style="left:703px;top:1440px;"/>
<img class="pageItem finger_3" src="assets/images/item_18171.png" alt="hier klicken" style="left:408px;top:2641px;"/>
<img class="pageItem finger_4" src="assets/images/item_18171.png" alt="hier klicken" style="left:438px;top:3371px;"/>
<img class="pageItem finger_5" src="assets/images/item_18171.png" alt="hier klicken" style="left:643px;top:4433px;"/>

So there are five fingers that should be animated. How can I combine the function? Any ideas?

Answer 1

to combine the animation change

class="pageItem finger_1" to class="pageItem finger finger_1"

AND

$('.finger_1') to $('.finger')

For fadein effect you can try,

$('.finger').fadeOut();
$('.finger').waypoint(function() {
    $('.finger').fadeIn();
    setInterval(function(){
        $('.finger').animate({ top: '-=12px' }, 500);
        $('.finger').animate({ top: '+=12px' }, 500);
    }, 1300);
}, {offset: '70%',  triggerOnce: true });

Update

$(window).load(function(){
    $('.finger').each(function(){
        $(this).waypoint(function() {
            $(this).fadeIn();
            setInterval(function(elem){
                elem.animate({ top: '-=12px' }, 500);
                elem.animate({ top: '+=12px' }, 500);
            }, 1300,$(this));
        }, {offset: "70%", triggerOnce: true }).fadeOut();
    });
});