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()을 붙여 주면 되요.
저는 제이쿼리를 책보고 배우지 않고 프로그램 만들 때 마다 이런 것은 없을까..
찾으면서 하는데요.
제이쿼리 정말 좋은 듯 해요.
댓글 1개