jQuery 애니메이트 메서드

jQuery 애니메이트 메서드

animate

선택자.animate({속성:값,속성:값},시간,이징,다른할일(animate끝나고))

jQuery에서 animate메서드는 수치가바뀌는 것만 가능
그래서 'background-color' 변경은 'animate'메서드로 적용이 안되는데 jQueryui라이브러리 추가 후 사용가능

$('div').mouseover(function(){
	$(this).animate({backgroundColor:'blue'},1500);
})
.mouseout(function(){		
    $(this).animate({backgroundColor:'green'},1500);
});

stop()

animate메서드는 'mouseover'와 'mouseout'을 예로 들 때 마우스를 연속해서 여러번 대면 마우스가 영역을 아예 벗어났는데도 , 그 횟수를 기억해서 끝까지 진행하기 때문에 animate메서드 앞에 stop()사용해주어야 함

stop(true)은 기본값이 'true'이기 때문에 괄호안의 'true'는 생략가능

$('div').mouseover(function(){
	$(this).stop(true).animate({backgroundColor:'blue'},1500); 
})
.mouseout(function(){							             		
        $(this).stop().animate({backgroundColor:'green'},1500);
});

easing

jQuery에서 '이징'은 linear, swing 이렇게 두 가지 사용가능
더 많은 '이징'사용을 하려면 jQueryui 라이브러리를 추가 후 사용가능

animate 끝나고 다른 할일 작성

 $('#typo .inner').click(function(){
	$(this).animate({opacity:0,fontSize:'0px'},1500,'easeInElastic', 
        function(){
			$(this).animate({opacity:1,fontSize:'110px'},500);
        });
    });