확대 효과를 시뮬레이션하기 위해 패널 이동 및 크기 조정

jQuery를 사용하여 적절한 함수를 이해하고 적절한 시간을 만들어야합니다.확대 효과를 시뮬레이션하기 위해 패널 이동 및 크기 조정

내 사이트에는 2 개의 주요 영역이 있습니다. 첫 번째는 내가 패널이라는 다른 영역 위에 나타나는 콘텐츠 영역입니다.

내가 원하는 것은 특정 링크를 클릭하여 조금 위쪽을 이동하고 움직임의 크기를 조정할 때이 패널이 필요하다. 그것은 현재 작동하지 않는 바닥에서 성장하는 패널을 대표해야합니다!? 여기

<script> 
$("#moveUp").click(
function(){ 
    $("#panel").animate(
    { 
      marginTop: "-=50px", 
    }, 1000); 
    } 
); 
}; 

function() { 
    $("#panel").animate(
    { 
      height: "+=50px", 
    }, 1000); 
    } 
); 
} 
); 
</script>

는 HTML입니다 : 여기

내 jQuery 코드입니다

<body> 

<div id="content-container"> 

<div id="content"> 
some content 
</div> 

</div> 

<div id="panel"> 

<div class="content"> 
other content 
<br /><br /> 
<a href="#" id="moveUp">move a bit up</a> 
</div> 

</div> 

</body>

나는 '위로 조금 이동'링크를 클릭 할 때 내 목표는 무엇 패널은 이동 50px 이상. 나중에 내 이메일 주소를 여기에 표시하고 내 이메일과 div 요소를 표시하거나 다른 링크를 누르면 내 이메일 주소를 숨길 수있는 기능을 갖습니다. 패널이 아래로 이동합니다.

출처

2009-09-06 Anonymous

스크립트의 구문 오류가 많습니다. 중괄호 중 일부는 일치하지 않으며 높이를 애니메이션화하기위한 두 번째 함수를 선언 할 필요가 없습니다. 하나의 animate() 호출에서 여러 속성 조작을 수행 할 수 있습니다.

<script type="text/javascript"> 
$("#moveUp").click(function(){ 
    $("#panel").animate({ 
      marginTop: "-=50px",   
      height: "+=50px" 
    }, 1000); 
}); 
</script>

내가 그건 당신이 달성하려고하지만, 그것을 한 번 확인하고 무엇을 확신 : 여기에 작동하는 버전입니다.

출처

2009-09-06 18:56:12 zombat

zombat의 대답을 기반으로 여기 jquery를 사용하는 방법을 배우면서 익숙한 모습을 보았습니다. http://jsbin.com/orobi – JasonDavis

안녕 Jason, 응답 해 주셔서 감사합니다. 그러나 귀하의 코드는 그대로 내 PC에서 작동하지 않습니다. 문제가 무엇인지 말해 주실 수 있습니까? –

확대 효과를 시뮬레이션하기 위해 패널 이동 및 크기 조정

답변

관련 문제