jQuery FadeOut div 有效 - .load 然后 .fadeIn div 无效

Question

我正在开发一个 WordPress 3.0 主题，这是我的第一个带有一些 jQuery 增强功能的主题。我正在尝试淡出和淡入每个帖子区域的分页。这个想法是，当用户单击“上一页”或“下一页”箭头时，列出的帖子将淡出，下一页帖子将加载然后淡入。

淡出效果很好，但新内容不会淡出进去后，它会突然弹出，不会褪色。它看起来不错，但它没有做我想做的事，我无法弄清楚为什么。

这是它现在在开发环境中工作的两个地方（我还没有在 FF 3.5、FF 3.6 和 Chrome 之外进行真正的跨浏览器测试，所以如果您使用 IE，它可能无法按预期工作）：

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

这是相应的 jQuery：

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

});

我已经尝试了我能想到的一切。任何想法将不胜感激。

Answer 1

即时淡入是因为链接正在执行它的默认行为...加载新页面，观察您的 URL 以查看它的变化:)

我认为总的来说您正在寻找的是这样的：

$('#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 未定义后，您需要从您单击的链接中提取 href 属性。有几种方法可以处理 的 #id 部分.load() 你正在做的事情，我只是做了一个简单的 .each() 此处，其中 this 指的是实际加载的 div，因此您可以获取 id 属性。

---

这是一种没有each的替代方法，但如果两者#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();
});