Question

我正在玩Velocity.js和jquery.inview，我希望当他们进入视图时，我的页面上的所有标题都会被幻灯片放入。此代码适用于第一个标题：

$('.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");
  }
});

如果我复制并粘贴以上几次，并将.movies-title替换为其他标题的类，则可以按照我的意愿运行。

然而，这似乎是很多额外的代码。我尝试将$('.movies-title')更改为$(.movies-title, .tv-title, .books-title)，但动画仅适用于列表中的最后一个元素。我还尝试为所有标题添加一个名为.title的新类，并将.movie-title更改为.title，但这也不起作用。

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

Answer 1

最好的解决方案是在每个元素上使用单个类，因为它们有一些共同之处。您可以将title添加为类类型并将其应用于该类。

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

我知道你在问题中提到了这一点，但我不明白为什么这不起作用。

Answer 2

尝试使用delegate而不是bind for multipleles。同时为所有人制作一个统一的课程（我只使用了标题）

就像这样 -

$('body').delegate('.title','inview', function(event, isInView, visiblePartX, visiblePartY) {

编辑 - 抱歉最初链接了错误的小提琴

请参阅小提琴http://jsfiddle.net/d1g7sLxq/3/

如何在多个元素上绑定到“inview”事件

2 个答案: