effect

페이지에 애니메이션 효과를 만들기 위한 메서드 집합

$.메서드명([speed | easing | callbak]);

speed : 실행속도 (ms단위)

callback : 효과 메서드 수행 후 수행할 함수 저장 (모든 진행 끝난 후 실행)

easing : 변경되는 지점별 속도

show() | hide() | toggle()

화면에 요소를 띄우고 지우는 효과

라인에 display : none이 들어갔다가 style이 적용되는 방식

slideDown() | slideUp() | slideToggle()

요소가 위 아래로 접었다가 사라지는 효과

slideDown, slideUp, slideToggle은 기본적으로 0.4초의 시간이 걸려 있다

fadeIn() | fadeOut() | fadeToggle()

요소가 화면에서 서서히 사라졌다 나타나는 효과

animate()

$선택자.animate({변경할 css 속성},[speed], [easing], [callback])

단, easing을 사용하기 위해서는 jQuery-ui 사용해야 한다

모든 속성이 적용되는 것은 아니다

jQuery-ui를 사용하면 더 많은 속성을 적용할 수 있다

$("#btn10").on("click", function(){
    div.animate(
        {
            "width" : "100px",
            "height" : "50px",
            "opacity" : "0.2",
            "background-color" : "red	// 적용되지 않는다
       },
       3*1000
    )
})