Jquery函数内部$(this)不起作用

Question

我正在尝试使用waypoints.js，使元素在滚动到它们时淡入。

我已经

$(document).ready(function(){

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

});

这个操作会添加一个名为'card-fadeIn'的类，该类的不透明度为1，同时还带有一种渐入动画效果。

当我把它改成

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

它能够正常工作，但会向每个card类添加opacity 1，破坏fadein效果。我尝试使用$(this)，但它不会淡入，也不会在控制台中给出错误。有任何想法吗？

- ServerSideSkittles

---

你能在那个函数里记录下这是什么吗？ - Jack Guy

“this” 可能与您所想的完全不同。 - Johan

这个this可能不再是jQuery对象的作用域了。在此之前将this保存在某个变量中。 - Lars Graubner

我认为，因为在这种情况下this是“路标”。在控制台记录this以检查它是什么。尝试将该元素传递给该函数。 - vaso123

是的，控制台日志给我一些元素和其他选项。 - ServerSideSkittles

Answer 1

你需要使用：

$(this.element)

在 Waypoint 处理程序中。因此，

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

< p >应该做你想要的事情。

< p >$(this)在 jQuery 回调函数中工作，因为 jQuery 是为了这样的工作而设计的。 然而，并没有什么神奇的地方，如果 this 不引用 DOM 元素，则会得到一个不起作用的 jQuery 对象（这也不会报告任何错误，因为这就是 jQuery 的工作方式）。Waypoint 库将 this 绑定到自己的上下文对象，并将涉及回调的 DOM 元素引用公开为“element”属性。

- Pointy

---

this.element会将正确的CSS添加到其中，但它会将动画应用于每个.card元素，我只想在向下滚动时触发它。 - ServerSideSkittles

@ServerSideSkittles，我不明白你的意思。你还没有发布你的HTML代码，我也不知道你想让页面做什么。你以前用过Waypoint吗？ - Pointy

第一次使用Waypoint。我有这个主题http://ashobiz.asia/flatmania151/theme/index.html，想要在另一个主题上复制效果。据我所知，该主题使用了这种确切的方法。我已经逐个删除了其他js部分，并且它只使用了CSS不透明度、jQuery Waypoints和类似于我的自定义函数。 - ServerSideSkittles

Answer 2

你尝试过这个元素吗？

$(document).ready(function(){

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

});

- Dennis