[jQuery] jQuery 를 이용한 영역의 크기가 변하는 UI

jQuery는 쓰면 쓸 수록 매력적인 라이브러리인 것 같습니다. 사용하면 할 수록 사용자가 사용하기가 아주 쉽고 편하게 되어있습니다. 이번에는 기회가 되어 클릭에 따라 영역의 크기가 변하는 UI를 제작해 보았습니다. jQuery의 쉬운 애니메이션 기능을 이용하여 간단하게 만들어보았습니다. 이걸 참조해서 다른 여러가지들도 잘 만들 수 있겠는데요?

우선 기본적인 내용을 보면, 클릭함에 따라 모든 영역들의 크기를 변화시키는 것인데요. jQuery의 특성상 아주 간단하게 만들 수 있었습니다. 하지만 요 안에 다른 영역이 잔쯕 들어간다면 상황은 좀 달라지긴 하겠죠? 하지만 특별한 컨텐츠가 없을 경우에는 아주 간단하게 구현할 수 있습니다.

아래와 같은 코드로 애니메이션을 표현할 수 있는 데요, 영영이 클릭이 되면 이벤트가 동작되게 하였습니다.

$('#item2').animate({width: '150', height: '300'}, 500, function() {});

영역을 클릭해보시면 움직임을 보실 수 있습니다. 선택한 영역이 커지면서 내용을 자세히 볼 수 있게 됩니다. "reset"을 누르시면 다시 원래의 상태로!