(Effects 01) hide/show, fadeIn/fadeOut, slideUp/slideDown 메소드

SoloLearn jQuery 번역


hide/show 메소드

  • jQuery has some easy-to-implement effects to create animations.
    • jQuery에는 애니메이션을 생성하기 위한 몇 가지 효과가 있다.
  • The hide() and show() methods are used to hide and show the selected elements.
    • hide()show() 메소드는 선택한 element를 숨기거나 보여주는 데 사용된다.
  • The toggle() method is used to toggle between hiding and showing elements.
    • toggle() 메소드는 element를 toggle 하는 데 사용된다.
    • toggle() 메소드는 hide()와 show()를 toggle 한다.
$(function() {
   $("p").click(function() {

코드 실행 확인

  • The hide/show/toggle methods can take an optional argument, speed, which specifies the animation speed in milliseconds.
    • hide/show/toggle 메소드는 선택적 인수인 speed를 사용할 수 있다.
    • 이는 애니메이션의 속도를 밀리초 단위로 지정한다.
  • For example, let’s pass 1000 millisecond as the speed argument to the toggle() method:
    • 예를 들어, toggle() 메소드에 speed 인수로 1000 밀리초를 전달해보자.
$(function() {
   $("p").click(function() {

코드 실행 확인

The hide/show/toggle methods can also take a second optional parameter callback, which is a function to be executed after the animation completes.

hide/show/toggle 메소드는 두 번째 선택적 매개변수인 callback을 사용할 수도 있다.

callback은 애니메이션이 완료된 후에 실행되는 함수이다.


fadeIn/fadeOut 메소드

  • Similar to the hide/show methods, jQuery provides the fadeIn/fadeOut methods, which fade an element in and out of visibility.
    • hide/show 메소드와 마찬가지로, jQuery는 fadeIn/fadeOut 메소드를 제공한다.
    • fadeIn/fadeOut 메소드는 element를 fade in/out 한다.
  • Just like the toggle() method switches between hiding and showing, the fadeToggle() method fades in and out.
    • toggle() 메소드가 hide/show를 전환하는 것처럼, fadeToggle() 메소드는 fadeIn/fadeOut을 전환한다.
$(function() {
   $("p").click(function() {

코드 실행 확인

  • Just like toggle(), fadeToggle() takes two optional parameters: speed and callback.
    • toggle()과 마찬가지로, fadeToggle()은 speedcallback이라는 두 개의 선택적 매개변수를 사용할 수 있다.

Another method used for fading is fadeTo(), which allows fading to a given opacity (value between 0 and 1): $("div").fadeTo(1500, 0.7);

fading에 사용되는 또 다른 메소드는 fadeTo()이다.

fadeTo() 메소드는 주어진 opacity(0과 1 사이의 값)로 fading 한다.

예: $("div").fadeTo(1500, 0.7);


slideUp/slideDown 메소드

  • The slideUp() and slideDown() methods are used to create a sliding effect on elements.
    • slideUp()slideDown() 메소드는 element에 sliding 효과를 생성하는 데 사용된다.
  • Again, similar to the previous toggle methods, the slideToggle() method switches between the sliding effects and can take two optional parameters: speed and callback.
    • 이전의 toggle 메소드와 마찬가지로, slideToggle() 메소드는 sliding 효과를 전환하고, 두 개의 선택적 매개변수인 speedcallback을 사용할 수 있다.
$(function() {
   $("p").click(function() {

코드 실행 확인


  • The speed parameter for the toggle() method is in:
    • toggle() 메소드의 speed 매개변수는 … 단위를 사용한다.



  • Fill in the blanks to fade the paragraph to 60% opacity in 2 seconds.
    • p를 60%, 2초로 fading 해라.
$("p").fadeTo(2000, 0.6);

  • Fill in the blanks to slide down the div element in 3 seconds upon clicking on the paragraph.
    • p를 클릭했을 때 div element를 3초로 slide down 해라.
$("p").click(function() {