animate 사용법 및 animate가 중복 될 경우 처리 하는 방법

예전에는 DOM을 이용해서 작업을 많이 했는데요.

제이쿼리가 굉장히 편리해서 현재까지 많은 사랑을 받고 있는 라이브러리가 되었어요

저도 DOM만 고수하다가 제이쿼리로 갈아탔는데..

사용하기가 너무 편리하다는 것이 좋은 듯 해요

특히 애니메이션 만들 때 ...

$(".id").animate({"display" : "none", "left": "500px"},5000);

주황색 박스 부분에 css를 넣으면 되고요

5000은 속도에요.  

왼쪽기준으로 500픽셀 움직이는 시간이 5초동안 이동하는 것을 의미하고요

실행이 끝난 후 callback 을 할 수 있는데요

$(".id").animate({"display" : "none", "left": "500px"},1,null, function(){alert('애니메이트 끝났어요');});

주황색 박수와 같이 해도 되고요

함수명을 넣어도 되요.

여기서 팁 하나가 나와요.

슬라이드 애니메이션이나 gnb 메뉴 만들 때 애니메이션이 중복 될 경우가 있어요

중복을 막으려면 기존 실행을 중단 시키고 다시 실행하거나  선행으로 실행 된 것이 끝나기를 기다려야죠

선행으로 실행된 애니메이션을 중단하는 방법을 알려드릴게요

$(".id").stop().animate({"display" : "none", "left": "500px"},1,null, function(){alert('애니메이트 끝났어요');});

stop()을 붙여 주면 되요.

저는 제이쿼리를 책보고 배우지 않고 프로그램 만들 때 마다 이런 것은 없을까..

찾으면서 하는데요.  

제이쿼리 정말 좋은 듯 해요.