jquery (2)animate

animate 작성 예

$function(){
    $('#typo').on('click', function(){
    	$('#typo .inner').animate({
                opacity: 0,
                fintSize: '0px'
            }, 
            1500
        );
    });
});

1500은 1.5초를 의미

 

지정 요소의 색 변경

$function(){
    $('#typo .inner').on('click', function(){
    	$('#typo .inner').animate({
                color: '#ebc000'
            }, 
            1500
        );
    });
});

 

animate() 메서드의 3번째 인수

종류	설명
linear	등속. 속도변화없이 애니메이션이 진행됨
swing	애니메이션 변화의 정도가 변함

예시

$function(){
    $('#typo .inner')
        .css('top', '-100px')
        .on('click', function(){
    	    $('#typo .inner').animate({
                top: '100px'
            }, 
            1500,
            'linear'
        );
    });
});

액션 종료 시 처리를 맨 마지막에 추가 가능

$function(){
    $('#typo .inner')
        .css('top', '-100px')
        .on('click', function(){
    	    $('#typo .inner').animate({
                top: '100px'
                }, 
                1500,
                function(){
                    $('#typo .inner').animate({top:'0px'}, 500);
                }
            );
        });
});

 

animate메서드 사용 시 주의점

동일한 요소에 대해서 별로의 animate메서드를 실행해도 먼저 실행된 animate가 중단되지 않는다.

$function(){
    $('#typo')
        .on('mouseover', function(){
    	    $('#typo').animate({
                    backgroundColor: '#ae5e9b'
                }, 
                500
            );
        })
        .on('mouseout', function(){
    	    $('#typo').animate({
                    backgroundColor: '#3498db'
                }, 
                500
            );
    });
});

위의 코드는 마우스를 빠르게 겹쳤다가 벗어나면 첫 번째 이벤트가 끝날 때까지 두 번째 이벤트가 실행되지 않는다.

 

animate중단 방법

stop( ture | false)

true 중단하기 false 중단 안 함

$function(){
    $('#typo')
        .on('mouseover', function(){
    	    $('#typo').stop(true).animate({
                    backgroundColor: '#ae5e9b'
                }, 
                500
            );
        })
        .on('mouseout', function(){
    	    $('#typo').stop(true).animate({
                    backgroundColor: '#3498db'
                }, 
                500
            );
    });
});

마우스가 요소를 벗어나게 되면 첫 번째 이벤트가 중지되고 두 번째 이벤트가 실행된다.