Jquery $(this) Not Working Inside Function

I am trying to use waypoints.js to have elements fadein when scrolling to hit the elements. I have $(document).ready(function(){ $('.card').waypoint(function(down) { console.

Solution 1:

You have to use

$(this.element)

in a Waypoint handler. So,

$(this.element).addClass('card-fadeIn');

should do what you want.

$(this) works inside jQuery callbacks because jQuery is designed for things to work that way. There's nothing magic about it, however, so if this doesn't refer to a DOM element, you'll get a jQuery object that won't do anything (and which won't report any errors, because, again, that's just how jQuery works). The Waypoint library binds this to its own context object, and that exposes a reference to the DOM element involved in the callback as the "element" property.

Solution 2:

Have you tried this.element?

$(document).ready(function(){

$('.card').waypoint(function(down) {
    console.log('hit element');
    $(this.element).addClass('card-fadeIn');
}, { offset: '100%' });

});