[jQuery] CSS 효과

Effect

duration	애니메이션이 실행되는 시간을 설정하는 매개변수 Number:밀리세컨드 String:"slow"==600ms, "fast"==200ms, default==400ms
easing	애니메이션이 진행하는 속도를 설정하는 매개변수 "linear" : 선형적으로 변화
complete	콜백함수 : 애니메이션이 종료된 후 실행되는 메소드

basics

• .show([duration [, easing][, complete]])
  • 해당 요소를 display를 보이게 하는 메소드
• .hide([duration [, easing][, complete]])
  • 해당 요소를 display를 none값으로 하는 메소드
• .toggle([duration [, easing][, complete]])
  • 해당 요소를 show와 hide상태로 번갈아 지정하는 메소드

fading

• .fadeIn( [duration ][, easing ] [, complete ] )
  • 해당 요소를 display를 페이드 인하며 천천히 보이게 하는 메소드
• .fadeOut( [duration ][, easing ] [, complete ] )
  • 해당 요소를 display를 페이드 아웃하며 천천히 none값으로 하는 메소드
• .fadeTo( duration, opacity [, easing ][, complete ] )
  • 해당 요소를 투명도를 천천히 바꾸는 메소드
• .fadeToggle( [duration ][, easing ] [, complete ] )
  • 해당 요소를 번갈아가며 페이드 인 페이드 아웃 지정하는 메소드

Sliding

• .slideUp( [duration ][, easing ] [, complete ] )
  • 해당 요소를 display를 위로 슬라이딩해 none값으로 하는 메소드
• .slideDown( [duration ][, easing ] [, complete ] )
  • 해당 요소를 display를 아래로 슬라이딩해 보이게 하는 메소드
• .slideToggle( [duration ][, easing ] [, complete ] )
  • 해당 요소를 slideDown slideUp 번갈아하는 메소드

.animate({params}, duration, callback)

• {params}
  • css 속성을 정의하는 매개변수
  • 요소가 해당 값을 바뀌는 과정
  • 상대 값으로도 지정가능
    • 값이 += 보다 커지거나 -= 보다 작아지게

애니메이션 대기열

• 순차적으로 .animate() 처리

$("div")
  .animate({height:"300px"},"slow") //A
  .animate({width:"300px"},"slow") //B
  .animate({height:"100px"},"slow") //C
  .animate({width:"100px"},"slow") //D

• 애니메이션 대기열 == 큐 == FIFO구조
  • A>B>C>D 순서로 처리
• .stop(stopAll,goToEnd) 메소드 : 애니메이션 중지
  • stopAll
    • true : 대기열 뒤에 애니메이션들까지 전부 중지
    • false : 대기열 뒤에 애니메이션들은 큐에 남아있음, 기본값
  • goToEnd
    • 현재 애니메이션을 즉시 완료할 수 있는 여부 지정 매개변수
    • true : 현재 애니메이션을 중지하고 완료상태로 보냄
    • false : 현재 애니메이션을 중지하고 중지된 시점의 값 유지, 기본값

<button id="start">start</button>
<button id="stopff">stop(f,f)</button>
<button id="stopft">stop(f,t)</button>
<button id="stoptf">stop(t,f)</button>
<button id="stoptt">stop(t,t)</button>

<div style="background-color: aqua; width: 200px; height: 100px; position:absolute;">HELLO</div>

<script>
  $("#start").click(function () {
    //대기열 큐
    $("div")
        .animate({left:"200px"},5000) // 1
        .animate({fontSize:"3em"},5000); // 2
  });
  $("#stopff").click(function () {
    $("div").stop(false, false);
    // 1 애니메이션 처리할때 stopff 버튼 클릭 -> 1번 애니메이션만 중지 / 2번은 큐에 남아있음
  });
  $("#stopft").click(function () {
    $("div").stop(false, true);
    // 1 애니메이션 처리할 때 stopft 버튼 클릭 -> 1번 애니메이션 중지(완료상태) / 2번은 큐에 남아있음
  });
  $("#stoptf").click(function () {
    $("div").stop(true, false);
    // 1 애니메이션 처리할 떄 stoptf 버튼 클릭-> 1번 애니메이션 중지 / 2번 애니메이션도 중지
  });
  $("#stoptt").click(function () {
    $("div").stop(true, true);
    // 1 애니메이션 처리할 때 stopft 버튼 클릭 -> 1번 애니메이션 중지(완료상태) / 2번 애니메이션도 중지
  });
</script>