jQuery rotate 이미지 회전 시 함정카드 조심

여러가지 훌륭한 프론트엔드 프레임워크가 많은 시대에 jQuery로 일반적인 CRUD 화면을 개발해야 하는 것은 굉장히 난감한 상황이다. 그러나 제이쿼리의 오래된 역사와 생태계로 인해 UI 개발에는 여전히 jQuery의 여러가지 플러그인 없이는 무언가를 '쉽게' 구현하기 힘들다.

jQuery rotate도 그 중 하나이다. 그 이름처럼 무언가를 회전시켜 주는 플러그인이다.

jQuery rotate

[http://jqueryrotate.com/]http://jqueryrotate.com/

기본적인 사용법은 워낙 간단해서 공식 홈페이지에 나온 몇 가지 예제로 충분하다.

• 단순 회전
• 애니메이션과 함께 회전
• 애니메이션 시간 조절
• 완료 후 콜백
• 무한 회전

이 정도면 회전으로 하는 모든 것을 할 수 있다. 그런데 주의해야 할 것이 하나 있다. 이번에 내가 삽질한 함정카드이다.

함정카드 조심

하나의 엘리먼트에 rotate를 적용하고 나면 그 다음에 또 실행할 때 이전 옵션이 그대로 적용된다.

$("#img").rotate({
    angle: 0,
    animateTo: 180,
    duration: 1000,
    callback: function(){
        alert('done.');
    }
});

setTimeout(function(){
    $("#img").rotate(360);  // 여기서도 콜백이 실행 됨.
}, 5000);