2014-11-09 3 views
1

편집을로드하기 전에 애니메이션을 실행 : 나는 특정 전환을하려고하지만, 그것을 할 수있는 적절한 방법을 찾을 수 없습니다링크를

제공하는 코드가 지금 당장 완벽하게 작동합니다. 먼저 스크린 샷을 살펴보십시오. 중간에 로고 (링크 img) (지금은 엉성한 자리 표시 자임)를 클릭하면 다른 페이지로 클릭하여 페이드 될 때 전체 화면을 검은 색으로 덮을 수있게 커집니다. 내 페이지는 로고를 더 크게 만들거나 다른 전환을 컴파일하는 대신 링크를 클릭 할 때 새 페이지를로드하는 것을 계속 주장합니다. 나는 수색했다 그러나 인터넷에 모든 것은 나가 사용하고 싶지 않는기구에지도한다. 프레임 워크를 사용하지 않거나 사용할 수 있습니까? 사용을 선고합니까?

TL; 박사 : 저는 전환 onclick을 발생하고

코드는 단지 몇 줄하지만 아래에 제공되는 새 페이지를로드 할.

: 는 당신에게 모든 (너희 중에 누구든지 비슷한 일을했다면 내가 처음 약간의 도움을 파악하려고 시도하는 일반 의사 코드 또는 아이디어보다는 직접 대답을 선호하는 것) 초기 페이지에 대한 HTML 감사 초기 페이지
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="homepage.css"> 
    <script src="homepage.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 
<body> 
    <video autoplay muted loop id="bgvid"> 
     <source src="tbdb.mp4" type="video/mp4"> 
    </video> 
     <img id="logo" src="logoexample.png" height="500px" width="500px" class="centered"/> 

</body> 
</html> 

JQUERY :

 $(document).ready(function() { 
     $("#logo").click(function() { 
      $(this).animate({ 
      height: '10000%', 
      width: '10000%' 
      }, 2000, function() { 
       window.location = "questioninital.html"; 
      }); 
      }); 
      }); 

screenshot from the initial page

+1

질문을 나눠 보려면이 방법으로 좋은 대답을 얻지 못합니다. 시작하려면 onclick 이벤트에'return false'를 추가하십시오. – skobaljic

+0

제안 해 주셔서 감사합니다, 지금 당장 – sinanspd

답변

0

return false가 잘못된 위치에 있습니다. 다음과 같아야합니다.

$(document).ready(function(){ 
    $("a").click(function(){ 
    $("img").animate({ 
     height:'=100%', 
     width:'=100%' 
    }); 
     return false; 
    }); 
}); 

이렇게하면 링크가 클릭되는 기본 동작을 방지 할 수 있습니다.

+0

차이가 없으므로 링크가 먼저로드됩니다. 그걸 잡아 주셔서 감사합니다. 의 순서를 바꿨습니다. 이제는 링크 나 애니메이션을 실행하지 않습니다. – sinanspd

+1

SO에서 디버깅하기 위해'console'을 사용하기 시작합니다. – Adam

+0

나는 그것을 이해했다. 앞으로 누군가를 체크 아웃해야 할 경우 코드를 작업 코드로 업데이트했습니다. – sinanspd

관련 문제