[jQuery/제이쿼리]슬라이드 애니메이션, slideUp(), slideDown()

---

---

# slideUp()

.slideUp([duration], [complete])

설명

해당하는 셀렉터를 슬라이드 애니메이션으로 숨겨줍니다.

duration

이 매게변수는 슬라이드 애니메이션이 동작하는 시간을 설정하는 매게변수 입니다. 문자형 또는 숫자형 타입이 들어갈수 있습니다. 기본값은 400ms 로 설정되어 있습니다.

complete

이 매게변수는 슬라이드 애니메이션이 다 완료 되고 동작 시켜줄 이벤트를 설정하는 콜백 함수 입니다. 함수형 타입이 들어가고, 오직 한번만 실행됩니다.

.slideUp([options])

설명

해당하는 셀렉터를 슬라이드 애니메이션으로 숨겨줍니다.

options

추가할 옵션을 설정해 주는 곳 입니다.

duration(기본 값 : 400)

이 옵션은 슬라이드 애니메이션이 동작하는 시간을 설정하는 매게변수 입니다. 문자형 또는 숫자형 타입이 들어갈수 있습니다.

easing(기본 값 : swing)

이 옵션은 슬라이드가 끝에 갈 때 느려지는 옵션입니다. 문자열 타입이 들어갈 수 있습니다.

queue(기본 값 : true)

이 옵션은 효과 애니메이션 큐에 적제를 할지 말지에 대한 옵션입니다. 만약 false일 경우 애니메이션이 바로 실행되며 true일 경우 애니메이션 큐에 따라 순차적으로 실행됩니다. 만약 커스텀 큐를 사용할 경우 .dequeue("커스텀 큐 이름") 을 사용하여야 실행이 가능합니다. 타입은 Boolean 또는 String 타입입니다.

step

각각의 애니메이션 때 마다 호출되어지는 옵션 입니다. 타입은 Function 이며, 매게변수는 (Number now, Tween tween) 입니다.

progress

각각의 애니메이션 이후에 호출 되어지는 옵션 입니다. 타입은 Function 이며 메게변수는 (Promise animation, Number progress, Number remainingMs) 입니다.

complete

애니메이션이 완료되어지면 호출되는 옵션 입니다. 타입은 Function 입니다.

start

애니메이션이 호출되어질 때 호출되는 옵션입니다. 타입은 Function 이며, 매게변수는 (Promise animation) 입니다.

done

각각의 요소 또는 노드들의 애니메이션이 완료될 때 마다 호출되어지는 옵션입니다. 타입은 Function 이며, 매게변수는 (Promise animation, Boolean jumpedToEnd) 입니다.

fail

애니메이션이 정상적으로 완료되지 않았을 때 호출되어지는 옵션 입니다. 타입은 Functino 이며, 매게변수는 (Promise animation, Boolean jumpedToEnd) 입니다.

always

각각의 요소 또는 노드들의 애니메이션이 완료 되거나, 완료되지 않았을 때 호출되는 옵션 입니다. 타입은 Functino 이며, 매게변수는 (Promise animation, Boolean jumpedToEnd) 입니다.

.slideUp([duration], [easing], [complete])

설명

해당하는 셀렉터를 슬라이드 애니메이션으로 숨겨줍니다.

duration

이 매게변수는 슬라이드 애니메이션이 동작하는 시간을 설정하는 매게변수 입니다. 문자형 또는 숫자형 타입이 들어갈수 있습니다. 기본값은 400ms 로 설정되어 있습니다.

easing

추가할 옵션을 설정해 주는 곳 입니다.

complete

이 매게변수는 슬라이드 애니메이션이 다 완료 되고 동작 시켜줄 이벤트를 설정하는 콜백 함수 입니다. 함수형 타입이 들어가고, 오직 한번만 실행됩니다.

---

실행결과

<해당 소스는 이해를 돕기위해 만들어진 코드입니다.>

---

See the Pen SlideUp Exam by HyeonJun, Bang (@UmNyaUm) on CodePen.

---

<코드가 정렬되어 보이지 않을경우 스크롤 이용 또는 Result를 클릭하여 안보이게 한후 보세요>

slideUp은 말그대로 특정 셀렉터를 슬라이드 애니메이션으로 올려주는

이벤트를 발생하는 jQuery입니다.

자세한 것을 실행결과와 설명을 보면 이해할 수 있을거라 생각이 들어

자세한 설명은 생략하도록하겠습니다.

# slideDown()

.slideDown([duration], [complete])

설명

해당하는 셀렉터를 슬라이드 애니메이션으로 보여줍니다.

duration

이 매게변수는 슬라이드 애니메이션이 동작하는 시간을 설정하는 매게변수 입니다. 문자형 또는 숫자형 타입이 들어갈수 있습니다. 기본값은 400ms 로 설정되어 있습니다.

complete

이 매게변수는 슬라이드 애니메이션이 다 완료 되고 동작 시켜줄 이벤트를 설정하는 콜백 함수 입니다. 함수형 타입이 들어가고, 오직 한번만 실행됩니다.

.slideDown([options])

설명

해당하는 셀렉터를 슬라이드 애니메이션으로 보여줍니다.

options

추가할 옵션을 설정해 주는 곳 입니다.

duration(기본 값 : 400)

이 옵션은 슬라이드 애니메이션이 동작하는 시간을 설정하는 매게변수 입니다. 문자형 또는 숫자형 타입이 들어갈수 있습니다.

easing(기본 값 : swing)

이 옵션은 슬라이드가 끝에 갈 때 느려지는 옵션입니다. 문자열 타입이 들어갈 수 있습니다.

queue(기본 값 : true)

이 옵션은 효과 애니메이션 큐에 적제를 할지 말지에 대한 옵션입니다. 만약 false일 경우 애니메이션이 바로 실행되며 true일 경우 애니메이션 큐에 따라 순차적으로 실행됩니다. 만약 커스텀 큐를 사용할 경우 .dequeue("커스텀 큐 이름") 을 사용하여야 실행이 가능합니다. 타입은 Boolean 또는 String 타입입니다.

step

각각의 애니메이션 때 마다 호출되어지는 옵션 입니다. 타입은 Function 이며, 매게변수는 (Number now, Tween tween) 입니다.

progress

각각의 애니메이션 이후에 호출 되어지는 옵션 입니다. 타입은 Function 이며 메게변수는 (Promise animation, Number progress, Number remainingMs) 입니다.

complete

애니메이션이 완료되어지면 호출되는 옵션 입니다. 타입은 Function 입니다.

start

애니메이션이 호출되어질 때 호출되는 옵션입니다. 타입은 Function 이며, 매게변수는 (Promise animation) 입니다.

done

각각의 요소 또는 노드들의 애니메이션이 완료될 때 마다 호출되어지는 옵션입니다. 타입은 Function 이며, 매게변수는 (Promise animation, Boolean jumpedToEnd) 입니다.

fail

애니메이션이 정상적으로 완료되지 않았을 때 호출되어지는 옵션 입니다. 타입은 Functino 이며, 매게변수는 (Promise animation, Boolean jumpedToEnd) 입니다.

always

각각의 요소 또는 노드들의 애니메이션이 완료 되거나, 완료되지 않았을 때 호출되는 옵션 입니다. 타입은 Functino 이며, 매게변수는 (Promise animation, Boolean jumpedToEnd) 입니다.

.slideDown([duration], [easing], [complete])

설명

해당하는 셀렉터를 슬라이드 애니메이션으로 보여줍니다.

duration

이 매게변수는 슬라이드 애니메이션이 동작하는 시간을 설정하는 매게변수 입니다. 문자형 또는 숫자형 타입이 들어갈수 있습니다. 기본값은 400ms 로 설정되어 있습니다.

easing

추가할 옵션을 설정해 주는 곳 입니다.

complete

이 매게변수는 슬라이드 애니메이션이 다 완료 되고 동작 시켜줄 이벤트를 설정하는 콜백 함수 입니다. 함수형 타입이 들어가고, 오직 한번만 실행됩니다.

---

실행결과

<해당 소스는 이해를 돕기위해 만들어진 코드입니다.>

---

See the Pen SlideDown Exam by HyeonJun, Bang (@UmNyaUm) on CodePen.

---

<코드가 정렬되어 보이지 않을경우 스크롤 이용 또는 Result를 클릭하여 안보이게 한후 보세요>

slideDown이란 함수는 slideUp과는 정반대의 역활을 합니다.

slideUp이 어떤것을 자연스럽게 숨기면 slideDown은 어떤것을 자연스럽게 보여줍니다.

그렇기 때문에 이 두 jQuery는 동시에 같이 쓰이는 경우가 많습니다.

자세한 것을 실행결과와 설명을 보면 이해할 수 있을거라 생각이 들어

자세한 설명은 생략하도록하겠습니다.

# 마무리

위 포스트는 제가 직접 제작한 것 입니다.

그렇기 때문에 틀린점이나 설명이 엉성한 점이 존재할 수 있습니다.

만약 틀린점이나 설명이 엉성한 부분이 존재하면 댓글로 알려주세요.

빠른 처리 하도록 하겠습니다.

읽어주셔서 감사합니다.