Fadein all Elements with jQuery Waypoints

Question

I want to fadein all elements on scroll with jQuery waypoints. When i scroll to the image i add a certain class to fade them in. For this i use jQuery Waypoints. When i scroll to the image the console.log is showing "Scrolled to image" but it cant add the class with "this" to the image.

$( document ).ready(function() { 
    $('img').waypoint(function() {
            console.log("Scrolled to Image");
            $(this).addClass("Test");
    },
    {
        offset: '50%',
        triggerOnce: true
    });    
});

Answer 1

this in the callback refers to the waypoint object. Try this.element instead (see http://imakewebthings.com/waypoints/guides/getting-started/ - there's a special section discussion this exact issue)

$( document ).ready(function() { 
    $('img').waypoint(function() {
            console.log("Scrolled to Image");
            $(this.element).addClass("Test");
    },
    {
        offset: '50%',
        triggerOnce: true
    });    
});