2012-05-14 2 views
0

애니메이션.jQuery를 주소 - 난 당신이 깊은 연결이 잘 작동 <a href="http://www.idbranding.nl" rel="nofollow">http://www.idbranding.nl</a>를 살펴 경우 jquery.address 플러그인</p> <p>과 AJAX 웹 사이트를 얻으려고 내용

유일한 문제는 내가 로딩 화면을 달성 할 수있다 시뮬 같은 : http://www.nerisson.fr/

그래서 내 질문은 (또한 jquery.address 플러그인을 사용하는) 사람이 컨텐츠 (페이드 아웃/FadeIn 애니메이션을하는 방법을 알고 않습니다) 및 로딩 화면 표시/숨기기? 나는 어렵지 않다고 생각하지만 jquery.address의 문서는 애니메이션과 관련해서는 제한적이다. 당신이 어떤에 적용 할 것 같은

$("#content").fadeOut("fast", function() { //block of code to be executed when page is faded out 
    $("#loadingPlaceholder").fadeIn("fast"); // fade in placeholder (e.g. loading image) 
    $.get(url, function(data){ // get the data and if data has been loaded... 
     $("#loadingPlaceholder").fadeOut("fast"); // fade out placeholder 
     $("#content").empty().html(data).fadeIn("fast"); // empty the innerHTML (--> prevents "flickering"), insert the loaded data and fade in again 
    }); 
}); 

이 또한 내가는 click() 기능을 사용하지 않을 :로드 기능과 같은

function loadURL(url) { 
    console.log("loadURL: " + url); 
    $("#content").load(url); 
}  

// Event handlers 
$.address.init(function(event) { 
    console.log("init: " + $('[rel=address:' + event.value + ']').attr('href')); 
}).change(function(event) { 
    $("#content").load($('[rel=address:' + event.value + ']').attr('href')); 
    console.log("change"); 
}) 

$('a').click(function(){ 
    loadURL($(this).attr('href')); 
}); 

답변

1

아마 뭔가 : 여기

내 코드입니다 새 링크 (로드 될 수 있음) -> 위임을 사용/on (사용중인 jQuery 버전을 알지 못함)

자세한 예제는 내 버전을 확인하십시오. 시온 https://github.com/peter-m/blueprint/blob/master/js/pushState.js

+0

우선, 귀하의 도움에 감사드립니다. 이제 시작입니다. 현재 jquery.settings.js를 구현해야합니다. github 예제는 멋지지만 멋지게 코드를 작성합니다. – idbranding

+0

...? "그때"가 없다면, 질문에 답을 표시해도 될까요? :) – Peter

+0

내 의견이 아직 완성되지 않은 동안 입력 버튼을 눌러 미안 해요. jquery.address.settings를 사용하여 전체 코드가 어떻게 표시되는지에 대한 제안이 있습니까? 코드를 내 curren't 코드에 넣으십시오. – idbranding