Question

我正在尝试使用waypoints.js在滚动以点击元素时使用fadein元素。

我有

$(document).ready(function(){

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

});

这样做是为了增加班级卡片的功能。这是不透明度1，动画很容易。

当我将其更改为

时

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

它工作正常，但为每个卡类添加了不透明度1并破坏了淡化效果。我试图使用$（this）而不是fadein，也不会在控制台中出错。有什么想法吗？

Answer 1

你必须使用

$(this.element)

在Waypoint处理程序中

。所以，

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

应该做你想做的事。

$(this)在jQuery回调中工作，因为jQuery是为那些工作方式而设计的。但是，如果this没有引用DOM元素，那么你将获得一个不会做任何事情的jQuery对象（以及不会报告任何错误，因为，再次，这就是jQuery的工作原理）。 Waypoint库将this绑定到它自己的上下文对象，并将对回调中涉及的DOM元素的引用公开为＆＃34;元素＆＃34;属性。

Answer 2

你试过这个元素吗？

$(document).ready(function(){

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

});

Jquery $（this）在函数内部无效

2 个答案: