jquery - Apply hover effect after infinite scroll -
i have hover image function reason not apply on new content loaded infinite scroll.
this hover function:
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();
and infinite scroll:
<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>
can please me fix this?
thanks time.
try this:
<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>
note registres duplicate events hover on existing elements. should remove first, or 'arrayofnewelements'.
Comments
Post a Comment