在无限滚动后应用悬停效果

我有一个悬停图像功能，因为某些原因不适用于装载了无限滚动的新内容。在无限滚动后应用悬停效果

这是悬停功能：

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

在无限滚动后应用悬停效果

回答

相关问题