jQuery FadeOut div的作品 - 。然后.fadeIn div不

Question

我正在开发一个WordPress 3.0的主题，我的第一个主题与一点jQuery增强。我试图淡入淡出每个帖子区域的分页。这个想法是，当用户点击“prev”或“next”箭头时，列出的帖子将淡出，帖子的下一页将加载，然后淡入。

淡出工作正常，但新内容不会淡入，它只是在不退色的情况下弹出。它看起来不错，但它没有做我想做的事情，我也无法理清原因。

下面是它现在在开发环境中工作的两个地方（我还没有真正跨过浏览器测试但在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

即时淡入是因为链接是做什么的默认行为...加载一个新的页面，看你的网址，看看它改变:)

我想你总要找的东西像这样：

$('#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属性。有几种方法可以去做.load()你正在做的#id部分，我在这里只做了一个简单的.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(); 
});