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

即时淡入是因为链接正在执行默认行为...加载新页面，查看您的网址以查看其更改：）

我认为你所寻找的整体是这样的：

$('#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(); });和{{1}}在页面中，它会更容易破解...希望情况并非如此：

{{1}}

jQuery FadeOut div工作 - .load然后.fadeIn div没有

1 个答案: