JQuery - 버튼 하나로 늘이고 줄이는 애니메이션 구현하기.

 

 

요즘 네이버 지식in을 통해 공부하고 있다.

질문자들이 올린 JS나 Jquey 질문등을 통하여 내가 해결해보며 답변자가 되보는 공부다.

그냥 일반적으로 책으로 공부하는것보다 뭔가 더 플러스가 되는 것 같다...

 

그래서 요번에 재밌는 질문을 가져왔다.

 

 

 

 

Jquery 애니메이션을 활용하여 버튼을 누르면 늘어나고 다시 버튼을 누르면 원상태로 복귀되는 질문이였다.

기초적이고 간단할 지 모르겠지만, 실무에서 정말 많이 쓰이는게 아닌가 싶다.

또 이런식의 웹 페이지를 구현한 곳이 정말 많고 많이 접할 수 있다.

 

(사실 jquery를 공부하면서 애니메이션은 깊게 공부하지 못해서 애니메이션을 처음 접하는 나에게도 정말 좋은 질문이였고 답변 또한 너무 고마웠다.)

 

 

 

질문 코드는 이러했다.

 

= 버튼을 누르고 id가 block이라는 개체에 애니메이션을 줘서 누를때 애니메이션 효과를 나타나는 것이다.

 

여기서 "어떻게 조건을 줘서 늘리고 줄이는걸 할 수 있을까?"라고 생각해봤는데 내가 너무 생각이 짧았던 것일지도 모른다.

답은 의외로 간단했다...

 

 

 

답변은 이러하다...

 

원래 기본 애니메이션 코드에 "marginLeft" 속성으로 분기처리를 해서 해결했다.(답변자님 너무 고마움...)

처음엔 toggle 메소드를 활용해서 구현을 해볼까? 라고 생각해봤지만 저런 쉬운 방식이 있구나! 라고 생각이 들었다.

(앞으로 소스코드 꼼꼼하게 읽어보는 습관을 길러야겠다...)