에는 <a href>?

-3

i made some several html files. at the main page i just wrote down some codes like this에는 <a href>?

<a href="new.html> 
    <img src="img/button" id="buttonid">  
    </a>

when i click the button, i see that the web starts new.html activity. I want to put some smooth page transitions when i open that "new.html". I searched through internet, and found out that most of the page transitions are done by putting other class into format. Whatever, are there any methods for page transitions that can be implemented when using ??

출처

2015-02-04 The Dongster

당신은 당신의 <a> 태그를 납치하고 자바 스크립트를 통해 동작을 처리 할 수 있습니다.

페이드 아웃 부분 그것을 빈 대상을주는

시작 : 당신이 그것을 클릭하면

<a href="#"> ... </a>

그래서, 아무 일도 발생하지 않습니다. 그런 다음,이 태그를 클릭 할 때로드 원하는 URL을 저장하는 사용자 지정 특성을 사용에서

<a href="#" data-url="new.html" class="smoothLink"> ... </a>

<a href="#" data-url="new.html"> ... </a>

그런 다음 자바 스크립트를 허용하는 몇 가지 클래스를 추가를/jQuery를 귀하의 링크를 대상으로 난 강력하게 당신을 조언, 성능상의 이유로, 그러나

$("a.smoothLink").click(function(e){ 
    $("body").fadeOut(function(){ // This will fade out your entire page in about half a second. When it's done, execute the callback function 
      window.location = e.currentTarget.attributes['data-url'].value; 
    }); 
}

: 자바 스크립트, 당신의 smoothLinks을 대상으로하고 (여기에 jQuery를 사용) 지연 행동을 쓰기 CSS3 불투명도 애니메이션 (opacity 1 -> 0 -> 1)을 선호합니다. jQuery의 페이드 함수와 달리 하드웨어가 가속되기 때문입니다.

여기 방법은 다음과 같습니다

(JS)

$("a.smoothLink").click(function(e){ 
     $("body").addClass("fadeOut"); // anything with the "fadeOut" class will become transparent in 1s in our CSS 

     setTimeout(function(){ // wait 1s, then change URL 
      window.location = e.currentTarget.attributes['data-url'].value; 
     }, 1000) 
}

(CSS)

.fadeOut { 
    opacity: 0; 
    transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -webkit-transition: opacity 1s ease-in-out; 
}

FadeIn 부분

새 페이지가로드되면, 그것은이 비어있는 채로 둔 다음 페이드 인하십시오. 전체적인 몸 만들기로 시작하십시오. 투명 Y :

(CSS)

body{ 
    opacity :0; 
}

그리고, 그것을 페이드.CSS3의 방법을 사용

$("body").fadeIn()

: JQuery와 방법을 사용하여

(HTML)
: 당신의 HTML에서

는 "fadeIn"클래스를 몸을 제공
<body class="fadeIn">

은 위로 CSS하려면 "fadeIn"클래스와 아무것도 페이딩 명령을 쓰기 :

(CSS)

.fadeIn { opacity: 1; transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; }

그래서 페이지로드에, 당신의 몸은 서서히 1 초 볼 얻을 것이다. 나는 검증되지 않은이 말을해야하지만, 멋진 힌트 :

편집해야 -

그냥 전체 흰색 오버레이로 전체 페이지를 덮는 흰색 오버레이 ** ** 간단한 해결책 , 당신은 의지에서 투명 또는 불투명 만들 수 :

(HTML)

<div id="overlay"></div>

(CSS)
01 23,516,
div#overlay{ position: absolute; z-index:999; top:0; left:0; width: 100%; height: 100%; background:white; pointer-events:none; // so you can click through opacity : 1; transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; }

(JS)

$("div#overlay").css("opacity",0); // will fade out the overlay on page load $("a.smoothLink").click(function(e){ $("div#overlay").css("opacity",1); setTimeout(function(){ // wait 1s, then change URL window.location = e.currentTarget.attributes['data-url'].value; }, 1000) }

출처

2015-02-04 08:47:35

–

ithe 콘솔은 $가 정의되지 않았다고 말합니다 ?? –

예, $는 jQuery를 나타냅니다. 그것은 당신이 그것을 사용하지 않고이 라이브러리를 포함해야한다는 것을 의미합니다. http://jquery.com/ –

The only way to make some transition is to use ajax as Jquery Mobile does in example (have a look at http://demos.jquerymobile.com/1.0a4/docs/pages/docs-transitions.html을 사용할 때 페이지 전환을 구현하는 방법이 있습니다.

출처

2015-02-04 08:22:26 forzayalta

스푸핑을 분류하는 한 가지 방법이 있습니다. 여기에서 사용하기 쉽도록 Jquery를 사용합니다. 당신의 CSS에 body 태그를 설정하면 아무것도 표시되지 않습니다. jquery를 사용하여 문서를로드하면 페이드 인으로 설정됩니다. 효과를 위해 3 초에 완료하고 경고 등을 실행했습니다.

$("body").fadeIn(3000, function() { 
 
    alert('Billys spoofed slow sort of fade in'); 
 
\t $('body').css('color','red'); 
 
    });

body{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Hello from fade in</h1>

출처

2015-02-04 08:43:45 Billy

편집 대답, 나는 유엔이 부러 아포스트로피를 탈출했다. addClass ("fadeOut"); // "fadeOut (fadeOut)"이있는 항목을 클릭하십시오. – Billy

에는 <a href>?

답변

관련 문제