[JavaScript] jQuery Effects(3) - Slide

세 번째로 알아볼 jQuery Effect는 Slide이다.

element가 사라지거나 나타날 때 slide 효과를 준다.

$(selector).slideDown([duration][,callback]);

$(selector).slideUp([duration][,callback]);

$(selector).slideToggle([duration][,callback]);

slideDown은 element가 나타날 때, slideUp은 element를 사라지게 할때, slideToggle은 slideDown, slideUp 함수를 토글하는 함수이다.

이전에 포스팅했던 effect들과 마찬가지로 함수의 인자로 duration과 callback 함수가 있다. duration은 "slow", "fast", 혹은 숫자가 들어가는데

"slow" = 600ms, "fast"=200ms이다. 만약 duration에 아무것도 주지 않으면 default값으로 400ms가 적용된다.

callback함수는 slide효과가 끝난 후 실행되는 콜백함수가 온다.

See the Pen pGmvRP by EBEL21 (@ebel21) on CodePen.

위의 예시는 panel 위의 trigger를 누르면 동작하는 slideDown, slideUp에 다른 duration을 줘봤고, panel밑의 trigger2에는 slideToggle 함수를 사용해봤다.