Question

Thanks for reading. I have some codes on my wordpress site, the first one adds an overlay over an image with a color, the article title and a link to go to the project. The second code adds an ajax pagination using jQuery.

The thing is that i have my projects with images and the jquery overlay owrking perfect, but when they click on the previous projects link that calls the ajax pagination, the jquery overlay stops working.

I have been trying different options, but maybe i’m not on the correct way to solve it. Does anyone has a clue?

Thanks in advance.

The codes:

    // PORTFOLIO HOVER EFFECT   

 jQuery('ul.portfolio-thumbs li').hover(function(){  
         jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});  
     }, function() {  
        jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});  
    });  


    // POSTS NAVIGATION     
    jQuery('#posts-navigation a').live('click', function(e){
        e.preventDefault();
        var link = jQuery(this).attr('href');
        jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
    });

Answer 1

I’ve found the solution in the same day and @BrockAdams helped me with the doubts. I’m putting here the code because it can be helpful for someone.

jQuery('ul.portfolio-thumbs li').live('hover', function(event){  
    if (event.type == 'mouseenter') {
          jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});  
        } else {  
         jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});  
         }
     });  


jQuery('#posts-navigation a').live('click', function(e){
        e.preventDefault();
        var link = jQuery(this).attr('href');
        jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
    });