2

我正在玩 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但这也不起作用。

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

4

2 回答 2

2

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

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

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

于 2014-12-03T18:40:04.993 回答
1

尝试使用委托而不是绑定多个。也为他们所有人做一个统一的班级（我只是用了标题）

像这样——

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

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

见小提琴http://jsfiddle.net/d1g7sLxq/3/

于 2014-12-03T19:04:04.323 回答