每个循环和 $(this).find 的 ScrollMagic

Question

我正在尝试使用 ScrollMagic 为我的 h1 标签内的几个跨度元素制作动画。

目标是遍历每个 h1（第一个除外），找到带有 .msk classes 的跨度，并向其子级添加另一个 class（.is-visible）。

我已经设置了一个 each 循环，但我不知道如何将 $(this) 与另一个选择器正确组合。

我的代码如下所示：

$('h1:not(:first)').each(function() {

 var msk = $(this).find('.msk span');
 console.log(msk);

 var h1Scene = new ScrollMagic.Scene({
  triggerElement: this,
  triggerHook: 0.7,
  reverse: false,
 })
 .addIndicators({
   name: "H1"
 })
 .setClassToggle(msk, 'is-visible')
 .addTo(controller)
});

我已经做了一些研究，但我仍然无法弄清楚它是如何工作的。

Answer 1

根据文档，setClassToggle 函数的第一个参数应该是 一个针对一个或多个元素的选择器或一个应该被修改的 DOM 对象。

但是当您调用 var msk = $(this).find('.msk span'); 时，您将在 msk 变量中存储 jQuery 对象。所以这应该是一个无效调用

.setClassToggle(msk, 'is-visible')

尝试调用它

.setClassToggle(msk[0], 'is-visible')

它将允许您访问 jQuery 选择的纯 DOM 元素。

每个循环和 $(this).find 的 ScrollMagic

ScrollMagic with each loop and $(this).find

jquery

loops

each

scrollmagic