在無限滾動後應用懸停效果

我有一個懸停圖像功能，因爲某些原因不適用於裝載了無限滾動的新內容。在無限滾動後應用懸停效果

這是懸停功能：

function hover_overlay_article() { 

    jQuery('a.thumblink, a.rating').each(function() { 

    jQuery(this).hover(function() { 
     $selector = jQuery(this).parent().children('a.thumblink').children('img'); 
     $selector.stop().animate({opacity : .1}, 250, 'easeOutCubic'); 
    }, function() { 
     $selector.stop().animate({opacity : 1}, 250, 'easeOutCubic'); 
    }); 

    }); 
} 

hover_overlay_article();

這是我的無限滾動：

<script> 
    var infinite_scroll = { 
    loading: { 
img:"/_assets/images/ajax-loader.gif", 
msgText: "", 
finishedMsg: "" 
}, 
    "nextSelector":"a.next.page-numbers", 
    "navSelector":"div.pagination", 
    "itemSelector":"div.fullarticle", 
    "contentSelector":".articlecontainer" 
}; 

jQuery(infinite_scroll.contentSelector).infinitescroll(infinite_scroll); 
</script>

有人可以幫我解決這一問題？

謝謝你的時間。

來源

2013-04-06 user2093301

您需要在您的callback()函數中添加hover_overlay_article()。嘗試這樣的：

<script> 
    var infinite_scroll = { 
     loading: { 
      img:"/_assets/images/ajax-loader.gif", 
      msgText: "", 
      finishedMsg: "" 
     }, 
     "nextSelector":"a.next.page-numbers", 
     "navSelector":"div.pagination", 
     "itemSelector":"div.fullarticle", 
     "contentSelector":".articlecontainer" 
     }, function(arrayOfNewElems) { 
      hover_overlay_article(); 
     }); 

    jQuery(infinite_scroll.contentSelector).infinitescroll(infinite_scroll); 
</script>

如果它的工作，那麼你可以嘗試改變你的代碼，只運行你的功能在最新的元素。現在，第一個元素的方式將會再次受到您的jQuery方法的影響。以下是你可以做一個例子：

function(arrayOfNewElems) { 
    for(var i=0;i<arrayOfNewElems.length;i++) 
    hover_overlay_article(arrayOfNewElems[i]); 
}

來源

2013-04-06 10:47:41

我複製的第一代碼，但我不知道在何處或如何使用以下：函數（arrayOfNewElems）{ 爲（VAR I = 0;我 user2093301 2013-04-06 20:38:24

這將是一個更新，更優化的版本。它會要求你重寫'hover_overlay_article（）'函數，以便它接受一個參數。因此，您的jQuery只能應用於由Infinite Scroll加載的最新元素，而不是像現在這樣的所有頁面。 – 2013-04-06 22:53:18

我已經嘗試了第一位代碼（）但我收到一個錯誤消息：「SyntaxError：missing：property id function（arrayOfNewElems）{」 – user2093301 2013-04-07 12:46:50

試試這個：

<script> 
     var infinite_scroll = { 
     loading: { 
    img:"/_assets/images/ajax-loader.gif", 
    msgText: "", 
    finishedMsg: "" 
    }, 
     "nextSelector":"a.next.page-numbers", 
     "navSelector":"div.pagination", 
     "itemSelector":"div.fullarticle", 
     "contentSelector":".articlecontainer" 
    }, function(arrayOfNewElems){ 

     hover_overlay_article(); 
    }); 

    jQuery(infinite_scroll.contentSelector).infinitescroll(infinite_scroll); 
    </script>

注意這個registres對現有元素懸停重複事件。你應該先刪除那些，或者用'arrayOfNewElements'做些什麼。

來源

2013-04-06 10:50:25

在無限滾動後應用懸停效果

回答

相關問題