Question

我正在尝试使用ScrollMagic为h1-tags中的几个span元素设置动画。

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

我已经设置了每个循环，但我不知道如何正确地将$（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');时，你将拥有和jQuery对象存储在msk变量中。所以这应该是无效的呼叫

.setClassToggle(msk, 'is-visible')

尝试改为调用

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

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

ScrollMagic与每个循环和$（this）.find

1 个答案: