[jQuery]애니메이트(animate)

*애니메이트(animate)

=> 시간에 따른 움직임 또는 애니메이션 작업시 사용

*애니메이트 속성

1. 크기값: width, height
2. 여백값: margin, padding
3. 위치값:position의 top, left, right, bottom
4. 투명도: opacity
5. 스크롤

=> animate를 사용할 때에는 위 속성을 사용할 수 있다.

            $('선택자').animate({
                속성: 속성값,
                속성: 속성값,
                ....
            }, 시간, 콜백함수);

            $('.box').animate({
                width: 400,
                height: 400
            }, 3000, function(){
                $('.box').animate({
                    margin: 100
                }, 1000, function(){
                    $('.box').animate({
                        top: -100,
                        left: -100
                    }, 2000, function(){
                        $('.box').animate({
                            opacity: 0.5
                        }, 5000)
                    })
                })
            });

* 박스를 클릭하면 1초 동안 가로 400px, 세로 400px 이동 후 색상변경

        $(document).ready(function(){

            $('.box').css({
                width: 100,
                height: 100,
                backgroundColor: "royalblue",
                position: "absolute"
            });


            $('.box').click(function(){
                $('.box').animate({
                    // transform: "translate(200px, 200px)" //사용불가
                    top: 200,
                    left: 200
                }, 1000, function(){
                    $('.box').css({
                        backgroundColor: "gold",
                        transition: "2s"
                    });
                });
            });

        });