2013-08-02 2 views
4

.fadeIn()을 사용하여 동적 콘텐츠 교체 모양을 좀 더 부드럽게 보이려고합니다. 내가 더블 페이드로만 설명 할 수있는 것을 얻는 것 외에는 (안팎으로).JQuery를 사용하여 double fadeIn

저는 JS와 jQuery API에 새로운 것이므로 어떤 도움을 주셨습니다.

데모 페이지 : http://robert-richter.com/boilerplate/

$('nav a').click(function(e) { 
     e.preventDefault() 
     var href = "inc/" + this.href.split('=').pop() + ".php" 
     $('.con').hide().load(href).fadeIn; 
     if (href == 'inc/blog.php') { 
      document.title = 'Robert-Richter.com | Blog'; 
      window.location.hash = 'index.php?content=blog'; 
     } else if (href == 'inc/portfolio.php') { 
      document.title = 'Robert-Richter.com | Portfolio'; 
      window.location.hash = 'index.php?content=portfolio'; 
     } else if (href == 'inc/lebenslauf.php') { 
      document.title = 'Robert-Richter.com | Lebenslauf'; 
      window.location.hash = 'index.php?content=lebenslauf'; 
     } else if (href == 'inc/kontakt.php') { 
      document.title = 'Robert-Richter.com | Kontakt'; 
      window.location.hash = 'index.php?content=kontakt'; 
     } else { 
      document.title = 'Robert-Richter.com'; 
      window.location.hash = ''; 
     } 
     return false; 
    }); 

는 또한하면 window.location.hash-것은 새 페이지가로드 될 때까지 다시 표시되지 않습니다,이 하나를 시도 domain/boilerplate/#index.php?content=blog

+0

함수를 실행하지 않으면 함수에 액세스 할 수 없기 때문에 fadein이 없어야합니다. 그것은 두 번째 질문에 대해 예상되는 행동입니다. '$ ('. con '). hide() .load (href) .fadeIn();' – jcubic

+0

. '#'는 "해쉬"라고 불리우며, 따라서'window.location.hash'는 URL에서 해시 다음에 나오는 문자열을 정의합니다. – cfs

+0

모든 답변이 있습니다. Balint Bako의 솔루션이 효과가 있습니다. – AnaMaria

답변

3

같은 사이에 #을 추가합니다 : 당신은 당신이 History API을 사용할 필요가 해시를 원하지 않는 경우

$('.con').hide().load(href, function() { 
    $('.con').fadein(); 
}); 
+0

와우이 위대한 작품. 고맙습니다! –

0

는 지원하지 않는 경우 또는 해시 변경을 사용하여 라이브러리가있다 브라우저는 hash.js 또는 history.js입니다.

+0

이 문서는 내 IE와 Android가 지원되지 않는다고 말합니다. 다른 방법이 있습니까? –

+0

해시가없는 URL을 변경하는 유일한 방법은 기록 API입니다. – jcubic

+0

https://github.com/browserstate/history.js 및 http://view.jquerymobile.com/1.3.1/dist/demos/widgets/navigation/에 대해 어떻게 생각하십니까? –

관련 문제