jquery - 无限滚动后应用悬停效果

Question

我有一个悬停图像功能，由于某种原因不适用于无限滚动加载的新内容。

这是悬停功能：

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>

有人可以帮我解决这个问题吗？

谢谢你的时间。

Answer 1

您需要添加hover_overlay_article()您的callback()功能。尝试这样的事情：

<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]);
}

Answer 2

尝试这个：

<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>

请注意，这会注册重复事件以悬停在现有元素上。你应该先删除那些，或者用'arrayOfNewElements'做一些事情。