3

我正在开发一个 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(); });
    });

});

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

4

1 回答 1

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部分，我只是在这里做了一个简单的操作，其中指的是实际加载的 div，因此您可以获取该属性。.load().each()thisid

这是没有 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();
});
于 2010-08-15T20:57:47.780 回答