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'做一些事情。

无限滚动后应用悬停效果

2 个答案: