jQuery animate

jQuery 의 animate 메소드를 사용하면 element 를 다양하게 이동시키고 이동시키는 모습을 화면에 보여줄 수 있다.

animate( properties, [speed], [easing], [callback] )
- properties : element 가 애니메이션이 끝나고 갖게 될 속성(css properties 값)
- speed : 애니메이션의 진행 시간 ( ms 단위 ) 또는 slow, fast, 1000
- easing : 애니메이션이 어떻게 진행될지를 제어하는 기능을 제공하는 선택사항
- callback : 애니메이션이 종료되었을 때 호출되는 메소드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    function move(){
        $('#moveImg').animate( {left:'150px'}, 1000)
                     .animate( {left:'50px'}, 500, move);
    }
    move();
})
</script>

배경 이미지와 움직이게 할 이미지 2개가 있다.

움직이게 할 이미지를 선택하여 1초후에 left 150px 에 있도록 한다.

다음에 0.5초후에 left 50px 에 있도록 한다.

move 는 callback 메소드로 반복 동작을 시킨다.

<script>
var state=true;
$("#button").click(function(){
    if(state){
        $("#effect").stop().animate({"background-color":"#f90", color:"#fff", width:"420px"}, 1000);
    }else{
        $("#effect").stop().animate({"background-color":"#f4f4f4", color:"#000", width:"200px"}, 1000);
    }
    state=!state;
});
</script>

jQuery 버전이 높아지면서 토글함수 기능이 없어져서 토글 처리하는 걸 status 값 true, false 를 이용하여 처리하도록 한 예제다.