如何绑定到多个元素上的'inview'事件

我在玩Velocity.js和jquery.inview，并且我希望页面上的所有标题在滑入视图时都可以滑动。此代码工作正常进行的第一个冠军：如何绑定到多个元素上的'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，但那也不起作用。

我在做什么错？我怎样才能压缩代码？

来源

2014-12-03 mcography

提琴会如果你想得到更多的具体帮助，这真的很有帮助 – ajmajmajma 2014-12-03 18:48:27

这里你去：http://jsfiddle.net/regularmegs/d1g7sLxq/ – mcography 2014-12-03 18:49:09

尝试使用委托而不是绑定为倍数。另外，还要统一类所有的人（我只是用标题）

所以这样的 -

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

编辑 - 对不起挂错小提琴最初

看到小提琴http://jsfiddle.net/d1g7sLxq/3/

来源

2014-12-03 19:04:04 ajmajmajma

谢谢，工作。你能解释为什么你的解决方案可以工作，而我的原始代码没有？委托和绑定有什么区别？ – mcography 2014-12-03 19:08:07

没问题！绑定只绑定一个事件，而委托只是添加事件监听器。 – ajmajmajma 2014-12-03 19:10:06

@ajmajmajma等等，为什么'.on（）'与它一起工作，当它与多个元素上的'click'这样的标准事件一起工作时就很好。这仅仅是因为'inview'事件的一些实现细节？ – OneHoopyFrood 2014-12-03 19:23:15

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

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

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

来源

2014-12-03 18:40:04 OneHoopyFrood

我同意...你应该添加一个类，你想要的所有对象都是一样的操纵，它是一个单一的jQuery选择。 – rfornal 2014-12-03 18:41:33

对，我试过了，它没有工作... – mcography 2014-12-03 18:41:40

它应该工作，请解释你的意思。 – OneHoopyFrood 2014-12-03 18:42:24

如何绑定到多个元素上的'inview'事件

回答

相关问题