Question

I have a loop of posts that I use a jquery hover function to expand the elements. My issue is that it only works for elements initially displayed on page load and fails for anything appended with infinite scroll.

This is the script I use to expand a box

$(document).ready(function() {
  $('.box').hover( function() {
       var height = $(this).children('.box-info').height();
       var newHeight = (height + 12);
       $(this).children('.box-image').css('top', -newHeight);
   }, function() {
       $(this).children('.box-image').css('top', 0);
  });
});

Then I have a loop and then a script to activate infinite scroll

var href = 'first';
$(document).ready(function() {
 $('#boxes').infinitescroll({
    navSelector: '.infinitescroll',
    nextSelector: '.infinitescroll a',
    itemSelector: '#boxes .box',
    loadingImg: '<?php echo get_bloginfo('stylesheet_directory') ?>/images/loading.gif',
    loadingText: 'Loading...',
    donetext: 'No more pages to load.',
    debug: false
}, function(arrayOfNewElems) {
    $('#boxes').masonry('appended', $(arrayOfNewElems));
    if(href != $('.infinitescroll a').attr('href')) {
        href = $('.infinitescroll a').attr('href');
    }
 });
});

What am I doing wrong?

Answer 1

As per the fiddle provided by you:

The HOVER does not work with absolutely positioned elements and animations

Instead of hover you can use the “mouseenter” and “mouseleave” events, which do not fire when child elements get in the way:

As per chat see this updated link
http://jsfiddle.net/Gm7Xb/11/