2010-08-15 5 views
3

jQuery 향상 기능이있는 첫 번째 테마 인 WordPress 3.0 테마를 개발 중입니다. 나는 각 게시물 영역에서 페이징을 페이드 아웃 (fade out)하고 페이드 인 (fade)하려고합니다. 사용자가 "이전"또는 "다음"화살표를 클릭하면 나열된 게시물이 페이드 아웃되고 포스트의 다음 페이지가로드 된 다음 페이드 인됩니다.jQuery FadeOut div 작품 - .load then .fadeIn div가 없습니다

페이드 아웃은 정상적으로 작동하지만 새로운 내용 페이드 인하 지 않는다면, 그냥 사라지지 않을 것입니다. 괜찮아 보이지만, 내가 원하는 것을하지 않고 왜 그 이유를 분류 할 수 없습니다.

여기 dev 환경에서 작동하는 두 곳이 있습니다 (아직 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(); }); 
    }); 

}); 

내가 생각할 수있는 모든 노력을했습니다. 어떤 아이디어라도 높이 평가할 수 있습니다. 링크가 기본 행동 ... 새로운 페이지를로드의 일을하기 때문에

답변

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 부분에 대해 간다는 몇 가지 방법이 있습니다. 여기에서 this이 실제로로드되는 div를 참조하는 경우 id 속성을 가져올 수 있습니다. .load()의 일부분을 수행했습니다.


가 여기에 각이없는 다른 방법이지만, 더 쉽게#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(); 
}); 
+0

닉, 이 아이디어는 아름답게 작동합니다. 감사합니다. – KcSchaefer

관련 문제