jQuery FadeOut div works - .load then .fadeIn div doesn't

Question

Hi all,

I'm developing a WordPress 3.0 theme, my first theme with a bit of jQuery enhancement. I'm trying to fade out and fade in the pagination on each posts area. The idea is that when a user click the "prev" or "next" arrows, the listed posts will fade out, the next page of posts will load and then fade in.

The fadeouts work fine, but the new content doesn't fade in, it just pops in with no fade. It looks OK, but it's not doing what I want and I can't sort out why.

Here are the two places it's working now on the dev environment (I haven't really cross browser tested yet outside of FF 3.5, FF 3.6 and Chrome, so if you're on IE it may not work as expected):

http://kendraschaefer.com/mandapop/gallery/ http://kendraschaefer.com/mandapop/blog/

And here's the corresponding jQuery:

$(document).ready(function(){
    $('#postPagination a').live('click', function(e){
        $('#blogListColWrapper, #galleryListColWrapper').fadeOut(200).load(link + ' #blogListCol', function(){ 
        $('#blogListColWrapper, #galleryListColWrapper').fadeIn(300); 
        Cufon.refresh(); });
    });

});

I've tried everything I can think of. Any ideas would be much appreciated.

Answer 1

The instant fade-in is because the link is doing it's default behavior...loading a new page, watch your URL to see it change :)

I think overall what you're looking for is something like this:

$('#postPagination a').live('click', function(e){
  var link = this.href;
  $('#blogListColWrapper, #galleryListColWrapper').fadeOut(200).each(function() {
    $(this).load(link + ' #' + this.id, function(){ 
      $(this).fadeIn(300); 
      Cufon.refresh(); 
    });
  });
  e.preventDefault();
});

This has a few changes, first the e.preventDefault() to prevent the link from actually going to the page. After that link was undefined, you need to pull the href attribute from the link you're clicking. There are a couple of ways to go about the #id part of the .load() you're doing, I just did a simple .each() here, where this refers to the div that's actually loading so you can grab the id property.

---

Here's an alternative way without the each, but it'll break more easily if both #blogLostColWrapper and #galleryListColWrapper are in the page...hopefully that's not the case:

$('#postPagination a').die().live('click', function(e) {
  $('#blogListColWrapper,#galleryListColWrapper').fadeOut(200)
    .load(this.href + ' #blogListColWrapper,#galleryListColWrapper', function() {
      $(this).fadeIn(300); 
      Cufon.refresh(); 
    });
  e.preventDefault();
});