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 属性。有几种方法可以处理 .load() 的 #id 部分你在做什么，我只是做了一个简单的.each()在这里，this 指的是实际加载的 div，因此您可以获取 id 属性。

---

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