Question

183

Jquery $(this) not working inside function

rated 0 times [ 186] [ 3] / answers: 1 / hits: 20899 / 9 Years ago, wed, august 12, 2015, 12:00:00

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.log('hit element');

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

}, { offset: '100%' });



});

What this does is adds the class 'card-fadeIn' which is opacity 1 and an ease in animation.

When I change it to

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

It works fine, but adds opacity 1 to every card class and ruins the fadein effect. I was trying to use $(this) instead but it wont fadein, nor will it give an error in the console. Any ideas why?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dominiquezachariahh

Add To Favorites

Follow

Total Points: 343

Total Questions: 81

Total Answers: 106

Location: Monaco

Member since Fri, Sep 24, 2021

3 Years ago

answered 9 Years ago bruno · Accepted Answer

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.