如何綁定到多個元素上的'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'事件

回答

相關問題