jQuery FadeOut div fonctionne - .load puis .fadeIn div ne

Question

Je développe un thème WordPress 3.0, mon premier thème avec un peu d'amélioration jQuery. J'essaie de disparaître et de disparaître dans la pagination sur chaque zone de messages. L'idée est que lorsqu'un utilisateur clique sur les flèches "prev" ou "next", les messages listés disparaîtront, la page suivante des messages se chargera puis apparaîtra.

Les fondus fonctionnent bien, mais le nouveau contenu ne disparaît pas, il apparaît simplement sans fondu. Ça a l'air correct, mais ça ne fait pas ce que je veux et je ne sais pas pourquoi.

Voici les deux endroits où il fonctionne maintenant sur l'environnement de développement (je n'ai pas vraiment testé le navigateur en dehors de FF 3.5, FF 3.6 et Chrome, donc si vous êtes sur IE cela peut ne pas fonctionner comme prévu) :

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

Et voici le jQuery correspondant:

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

}); 

J'ai tout essayé je peux penser. Toutes les idées seraient très appréciées.

Answer 1

L'instant fade-in est parce que le lien fait son comportement par défaut ... le chargement d'une nouvelle page, regarder votre URL pour le voir changer :)

Je pense que l'ensemble ce que vous cherchez est quelque chose comme ceci:

$('#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(); 
}); 

cela a quelques changements, d'abord le e.preventDefault() pour éviter que les relations d'aller effectivement à la page. Après que link n'était pas défini, vous devez extraire l'attribut href du lien que vous cliquez. Il y a un certain nombre de façons de faire la #id partie de la .load() que vous faites, je viens de faire un simple .each() ici, où this se réfère à la div qui est en train de charger afin que vous puissiez récupérer la propriété id.

---

est ici une autre façon sans chacun, mais il ne marchera pas plus facilement si les deux #blogLostColWrapper et #galleryListColWrapper sont dans la page ... Espérons que ce n'est pas le cas:

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