JQuery를 사용하여 그룹의 모든 요소에 애니메이션 효과를 적용하는 방법 - 메뉴 예?

Question

예제가 있습니다. http://jsfiddle.net/kamaci/uVQZc/3/

큰 파란색 div에 애니메이션을 적용 할 때 해당 버튼의 크기도 조정하고 싶습니다. 실제로 div의 내부에 더 많은 요소를 넣을 수 있으며 요소 내부에 요소를 넣을 수 있습니다. 그래서 더 큰 컨테이너가 크기가 조정될 때 요소의 내부도 크기가 조정되는 일반 구조가 필요합니다.

크기 조정 작업이 비율을 통해 수행 할 수 있지만, 나는 그것에 대해 솔루션을 찾을 수 없습니다 : 내가 원하는 내가 메뉴를 만들고 싶어하고, 사용자가 버튼을 클릭 할 때 무엇 모두 question1

모두 해당 메뉴는 왼쪽에 있습니다 (애니메이션 포함). 관련 질문 :

simple처럼 둥근 사각형이있는 메뉴를 원한다. (예 : CSS3로 끝낼 수 있다고 생각한다.) 실제로 그 버튼을 사용하면 완벽 할 수있다.

나는 JQuery와 및 jQuery를 도구와 HTML5를 사용하고 싶습니다. (내가 CSS에 대한 깊은 지식이없는)

감사합니다.

Answer 1

Jquery/Jquery Tools Getting Smaller Effect에서 복사 할 수 있지만 CSS3 호환 브라우저에서만 작동합니다.

See jsFiddle

CSS :

div { 
    position: absolute; 
    background-color: #abc; 
    left: 110px; 
    width: 300px; 
    height: 200px; 
    margin: 5px; 
} 
button { 
    width: 32%; 
    height: 48%; 
    margin: 1% 0 0 1%; 

    background: #00f; 

    border: 1px solid #CCCCCC; 
    border-radius: 6px; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 

    background: -moz-linear-gradient(
    top, 
    #f0f0f0 0%, 
    #e3e3e3); 
    background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#f0f0f0), 
    to(#e3e3e3)); 
} 

을 그리고 당신은 (그렇지 않으면 바보 그들 사이의 공간을 얻을 것이다 때문에, <button>들 사이의 모든 공백을 제거 할 수 있지만 사실보다 강력한 솔루션은 다음과 같을 것) :

<div id="fd" class="block"> 
<button type="button">1!</button><button type="button">2!</button><button type="button">3!</button><button type="button">4!</button><button type="button">5!</button><button type="button">6!</button> 
</div>