SoloLearn jQuery 번역

hide/show

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() {
      $("div").toggle();
   });
});

코드 실행 확인

• 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() {
      $("div").toggle(1000);
   });
});

코드 실행 확인

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

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() {
      $("div").fadeToggle(1000);
   });
});

코드 실행 확인

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

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

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 효과를 전환하고, 두 개의 선택적 매개변수인 speed와 callback을 사용할 수 있다.

$(function() {
   $("p").click(function() {
      $("div").slideToggle(500);
   });
});

코드 실행 확인

QUIZ

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

milliseconds

밀리초

• 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() {
   $("div").slideDown(3000);
});