jQuery에서 코너 - 투 - 코너 디스플레이 애니메이션?

Question

애니메이션이 display:none;에서 display:block;으로가는 상대 위치 지정 div에 애니메이션을 적용해야합니다. 오른쪽 하단 모퉁이에서 왼쪽 상단 모퉁이로 시작하여 크기를 조절해야합니다. 이 일을하는 방법이 있습니까? (가급적 jQuery에서 작동하지만 좋은 것은 무엇이든)

Answer 1

이게 당신이 찾고 있는게 있니?

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate

http://jqueryui.com/effect/

Answer 2

http://jqueryui.com/resizable/

나는 당신이 페이드 인 또는 요소의 크기를 변경할지 모르겠습니다. 숨길 필요가있는 것처럼 들리 네요.

HTML 레이아웃은 모두 상단과 왼쪽에서 이루어 지므로 오른쪽 아래에서 왼쪽 상단으로 애니메이션을 적용하는 것이 가장 어렵다고 말하는 것은 까다 롭습니다. 조심스럽게 고정 된 위치 또는 절대, you can get an element to show from the bottom up.와 slideUp 및 slideDown을 결합하여

하지만 일부 very advanced jQuery with bleeding edge includes.

그래서 나는이 솔루션을 제공합니다 사용하지 않고 오른쪽에서 왼쪽으로 밀어 수있는 방법을 못 들었 : 사업부 있기 때문에 당신이하려고하는 상대적 위치를 표시하는 데는 일종의 래퍼가 있거나 쉽게 배치 할 수 있습니다.

래퍼를 사용하면 overflow 규칙을 숨기고 그 범위의 '숨기기'div를 배치 할 수 있습니다.

HTML :

<div class='wrapper'> 
    <div class='growIt'>Text for div</div> 
</div> 
<input type='button' id='showHide' value='Show/Hide'/> 

CSS :

Now with a simple jQuery animate 랩퍼 여기

의 경계 내부를 다시 배치하여 '쇼'를 가져올 수있는 것은 한 예이다

.wrapper{ 
    background:blue; 
    position:relative; 
    width:200px; 
    height:200px; 
    overflow:hidden; 
} 
.growIt{ 
    background: red; 
    position:relative; 
    width:200px; 
    height:200px; 
    top:200px; 
    left:200px; 
    display:block; 
} 

jQuery :

$(function(){ 
    var hiding = true; 
    $('#showHide').click(function(){ 
     if(hiding == true){ 
      hiding = false; 
      $('.growIt').animate({top:'0px',left:'0px'},2000);  
     }else{ 
      hiding = true; 
      $('.growIt').animate({top:'200px',left:'200px'},2000);  
     } 
    }); 
}); 

버튼을 클릭하면 빨간색 div가 숨겨 지거나 표시됩니다.

당신이보기에 관해서는 방법 중 다른 형태의 요소를 밀어해야하기 때문에 display:none에서 display:block에 애니메이션의 귀하의 요구 사항 인 경우, I would suggest adding another wrapper with position:relative and then making the wrapper slide 'down' from the bottom.