jQuery淡出div有效-使用.load然后.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(); });
    });

});

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

- KcSchaefer

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 的替代方法，但如果页面中同时存在 #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();
});

- Nick Craver