JQuery FadeOut div works -.load then.fadeIn div not

Question

I am developing a WordPress 3.0 theme, my first theme with a bit of jQuery improvement. I am trying to fade and fade by page in each message area. The idea is that when the user clicks the "prev" or "next" arrows, the listed messages will disappear, the next message page will load and then disappear.

Fadeouts work fine, but the new content does not fade, it just appears without fading. It looks fine, but it does not do what I want, and I cannot figure out why.

Here are two places that he is currently working in the dev environment (I actually have not cross-checked browsers outside of FF 3.5, FF 3.6 and Chrome, so if you are in IE, this may not work as expected):

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

And here is 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 tried everything I could think of. Any ideas would be highly appreciated.

Answer 1

Instant fading is due to the fact that the link does this by default ... load a new page, see the URL to see its change :)

I think that overall what you are looking for looks 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();
});

: e.preventDefault(), , . link undefined, href , . #id .load(), , .each() , this div, , id.

---

, , #blogLostColWrapper #galleryListColWrapper... , :

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