javascript - 如何在多个元素上绑定(bind)到 'inview' 事件

Question

我正在尝试使用 Velocity.js 和 jquery.inview，我希望我页面上的所有标题在出现时都滑入 View 。此代码适用于第一个标题:

$('.movies-title').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
  if (isInView) {
    // element is now visible in the viewport
    if (visiblePartY == 'top') {
      // top part of element is visible
    } else if (visiblePartY == 'bottom') {
      // bottom part of element is visible
    } else {
      // whole part of element is visible
      $(this).velocity("transition.slideDownIn", 500);      
    }
  } else {
    // element has gone out of viewport
    $(this).velocity("reverse");
  }
});

如果我多次复制并粘贴上面的内容并将 .movi​​es-title 替换为其他影片的类，它会按我想要的方式工作。

但是，这似乎有很多额外的代码。我尝试将 $('.movi​​es-title') 更改为 $(.movi​​es-title, .tv-title, .books-title) 但是动画只能工作对于列表中的最后一个元素。我还尝试向所有标题添加一个名为 .title 的新类，并将 .movi​​e-title 更改为 .title 但那没有要么工作。

我做错了什么？如何压缩代码？

Answer 1

最好的解决方案是对这些元素中的每一个使用一个类，因为它们有一些共同点。您可能只是将 title 添加为类类型并将其应用于该类。

<div class="title movie-title"></div>

我知道您在问题中提到了这一点，但我不明白为什么这行不通。