06. jQuery Effects

Hide / Show

hide()및 show()메서드를 사용하면 HTML 요소를 숨기고 표시 할 수 있습니다 

hide()	요소를 숨깁니다.
show()	요소를 보여줍니다.

See the Pen OJNmQXr by miae (@flato) on CodePen.

 

 

 

Fading

요소를 서서히 보여주거나 없앱니다.

$(selector).fadeToggle(speed,callback);

speed 매개 변수는 효과의 지속 시간을 지정하고 "slow", "fast"또는 milliseconds(2000) 값을 사용할 수 있습니다.

선택적 콜백 매개 변수는 페이딩이 완료된 후 실행되는 함수입니다.

fadeIn()	숨겨진 요소를 서서히 보여줍니다.
fadeOut()	요소를 서서히 안보이게 합니다.
fadeToggle()	fadeIn()및 fadeOut() 메서드 사이를 전환 합니다.
fadeTo()	주어진 불투명도 (0과 1 사이의 값)로 페이드 합니다.

See the Pen LYNyQJm by miae (@flato) on CodePen.

 

 

See the Pen poyPaKy by miae (@flato) on CodePen.

 

 

 

Sliding

요소를 위아래로 슬라이드합니다.

slideDown()	요소를 아래로 슬라이드 합니다.
slideUp()	요소를 위로 슬라이드 합니다.
slideToggle()	요소를 위 아래로 슬라이드 합니다.

$(selector).slideToggle(speed,callback);

See the Pen xxVdQaM by miae (@flato) on CodePen.

 

 

 

Animation

사용자 정의 애니메이션을 만들 수 있습니다.

$(selector).animate({params},speed,callback);

codepen.io/flato/pen/QWNvzjm">

See the Pen QWNvzjm by miae (@flato) on CodePen.

 

 

 

See the Pen jOqmXqx by miae (@flato) on CodePen.

 

 

 

See the Pen bGpWOea by miae (@flato) on CodePen.

 

 

 

See the Pen KKzmbgB by miae (@flato) on CodePen.

 

animate () 메서드를 사용하여 모든 CSS 속성을 조작 할 수 있습니까?

네, 거의! 그러나 기억해야 할 한 가지 중요한 사항이 있습니다. 모든 속성 이름은 animate () 메서드와 함께 사용할 때 카멜 케이스 여야합니다. padding-left 대신 paddingLeft, margin-right 대신 marginRight 등을 작성해야합니다.

 

Stop Animations

stop()

애니메이션이나 효과가 끝나기 전에 중지하는 데 사용됩니다.

 

See the Pen dyMWwNM by miae (@flato) on CodePen.

 

더 많은 효과를 참고하려면...

www.w3schools.com/jquery/jquery_ref_effects.asp

jQuery Effect Methods

 

animate()	Runs a custom animation on the selected elements
clearQueue()	Removes all remaining queued functions from the selected elements
delay()	Sets a delay for all queued functions on the selected elements
dequeue()	Removes the next function from the queue, and then executes the function
fadeIn()	Fades in the selected elements
fadeOut()	Fades out the selected elements
fadeTo()	Fades in/out the selected elements to a given opacity
fadeToggle()	Toggles between the fadeIn() and fadeOut() methods
finish()	Stops, removes and completes all queued animations for the selected elements
hide()	Hides the selected elements
queue()	Shows the queued functions on the selected elements
show()	Shows the selected elements
slideDown()	Slides-down (shows) the selected elements
slideToggle()	Toggles between the slideUp() and slideDown() methods
slideUp()	Slides-up (hides) the selected elements
stop()	Stops the currently running animation for the selected elements
toggle()	Toggles between the hide() and show() methods