2012-10-30 3 views
0

2 개의 개별 html 페이지 이름 index.html과 mainpage.html 사이의 전환 사이에 흰색 화면이 나타나는 문제가 있습니다. 누구든지 dissapear.i에 이것을 얻을 수 제발 jQuery 함수에 넣고있다 페이드 아웃! 다음 코드 :2 html 페이지 사이의 흰색 깜박임

추신 : 나는 Windows phone 7 에뮬레이터를 사용하고 있습니다!

HTML :

<a id="loginbtn" data-role="button" href="MainPage.html" 
style="margin-left: 60px;" class="ui-btn-up-a"> Log in</a> 

JQuery와 :

$(document).ready(function() { 
     $("body").css("display", "none"); 
     $("body").fadeIn(3000); 

     $("a#loginbtn").click(function (event) { 
      event.preventDefault(); 
      linkLocation = this.href; 
      $("body").fadeOut(200, redirectPage); 
     }); 

     function redirectPage() { 
      window.location = linkLocation; 
     } 
    }); 

난 다음 링크에서왔다,하지만 난 그래서 난이 얻을 해달라고 코르도바/폰갭을 사용하여 매우 새로운 오전, 아마도 누군가가 그것을 설명 나에게 큰 도움이 될 것이다!

링크 :

Github Forums

Github Forums - "Answer"

페이드 아웃 작동하고, 페이드! 하지만 페이드 아웃 후에는 흰색 화면이 나타나고 새 페이지가로드됩니다.

사용 : HTML5/CSS/자바 스크립트/Jquerymobile/Jquery.1.7/JqueryMobile.1.2.0 모바일 등, 어쩌면 신체 나에 배경 색상을 포함하여 jQuery를 우회 사전

+1

대신 무엇을 기대합니까? 페이지가 끝나면 실제로 흰색이됩니다. 그럼 당신은 페이지 새로 고침을하고 새 페이지도 흰색으로 시작됩니다 ... – devnull69

+0

내가 그렇게 말했듯이, 그래서 그 하얀 화면에 대한 주위에 일은 없다고? 새 화면이로드 될 때마다 앱에 흰색 화면이 표시됩니까? 최소한 응용 프로그램의 색상과 일치하도록 색상을 변경할 수 없으므로 전환이 훨씬 나아질 수 있습니다. 빠른 답장을 보내 주셔서 감사합니다 – Arrie

+0

해결 방법이 있습니다 ... Ajax를 사용하여 동적으로 새 페이지를로드 한 다음 jquery-mobile의 내장 된 전환을 사용하십시오. 그러나 이것은 당신이 당신의 응용 프로그램을 재구성 할 것을 요구할 것입니다. – devnull69

답변

1

문제의 일부는 document.location을 사용하고 Romain이 지적한대로 효과적으로 다시 시작하는 것입니다. 그러나이를 수정 한 후에도 여전히 빈 페이지가 표시되지만 다른 이유가 있습니다.

기본적으로 1.1 이후의 jquery 모바일 전환은 순차적이며 (일명 끔찍한 깨짐) 페이지 1은 페이드 아웃되고 기본 흰색 배경은 그대로두고 페이지 2는 페이드 인합니다.멋진 크로스 페이드를 얻으려면 전환 핸들러를 교체해야합니다.

https://github.com/watusi/jquery.mobile.simultaneous-transitions

+0

awesome! 저 문서는 저를 위해 진짜로 작동했다! 대단히 감사합니다! – Arrie

0

에서

감사 HTML 귀하의 문제를 아주 쉽게 해결할 수 있습니다. 확실하지 당신의 디자인은, 그래서

+0

내 CSS에 내 HTML 태그를 줄 수있는 배경색 속성이 ?? 그게 무슨 뜻이야? :) – Arrie

+0

네가 할 수있다 :) 나는 html, body {background : -whatever-;} (또는 배경색, 물론)와 같은 것을 제안 할 수있다. 실제로 고칠 수 있는지 확실하지 않지만 모바일 프로젝트의 배경 이미지를 넣을 때 페이지가 전환 될 때도 머물러 있습니다. – yogee

+0

하나의 html 파일 또는 별도의 모든 페이지입니까? 아니, 그게 작동하지 않는다, 아니면 내가 잘못하고있는거야? 어쩌면 하드 배경 코드를 페이지 위에있는 html로 하드 코드 – Arrie

0

여기에 주장 IE 페이지 깜박임 없애는 CSS-트릭에서 작은 조각입니다 :) 내 대답을 투표 해 주시기 가정 방법 :

<!-- Stop IE page flicker --> 
<!--[if IE]> 
    <meta http-equiv="Page-Enter" content="blendTrans(duration=0)" /> 
    <meta http-equiv="Page-Exit" content="blendTrans(duration=0)" /> 
<![endif]--> 

확실하지 모바일과 데스크톱 모두에 적용할만한 가치가 있습니다.

+0

을 참조하십시오. 아직 성공하지 못했습니다. – Arrie

1

jquery 모바일을 사용할 때의 이점 중 하나는 내장 된 전환에 액세스하는 것입니다. 아웃 페이드 대신 수동으로 페이드를하고, 당신은 대신 중 하나에 의해 페이지를 변경해야합니다 단순히 대상 페이지에 링크

  • : JQM은 다음과 같은 구문 <a href="mainpage.html" data-transition="fade">link</a>을 사용하여 단순 링크의 전환을 정의 할 수 있습니다. 설명의 $ .mobile.changePage() (에서는 window.location을 설정하는 대신에) JQuery와 이동 방법을 사용 here

  • 도시 및 값 "전환"파라미터를 지정으로 관련된 추가적인 JS는 JQM은 모두 처리되지 당신은 수동으로 페이드 효과를 추가 할 필요가 없습니다. 자세한 내용은 here을 참조하십시오.

관련 문제