jQuery Effects - Fade

jQuery로, 요소를 시야에서 점점 또렷해지거나 점점 흐려지게 할 수 있습니다.

jQuery에는 다음과 같은 fade 메소드가 있습니다.

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

jQuery fadeIn() 메서드는 숨겨진 요소를 fade in (점점 또렷해지다)하는 데 사용됩니다.

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

$ (selector) .fadeIn (speed, callback); 속도 매개 변수 선택은 효과의 지속 시간을 지정합니다. “slow”, “fast”또는 밀리 초 값을 사용할 수 있습니다.

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

다음 예제는 다른 매개 변수를 가진 fadeIn() 메서드를 보여줍니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
      });
    });

jQuery fadeOut() 메서드는 보이는 요소를 페이드 아웃(fade out, 점점 흐려지다)하는 데 사용됩니다.

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

속도 매개 변수 선택은 효과의 지속 시간을 지정합니다. “slow”, “fast”또는 밀리 초 값을 사용할 수 있습니다.

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

다음 예제는 다른 매개 변수를 가진 fadeOut() 메서드를 보여줍니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeOut();
        $("#div2").fadeOut("fast");
        $("#div3").fadeOut(2000);
      });
    });

jQuery fadeToggle() 메서드는 fadeIn() 및 fadeOut() 메서드 사이를 토글합니다.

요소가 페이드 아웃 되면, fadeToggle()이 요소들을 점점 또렷하게(fade in) 합니다.

요소가 페이드 인 되면, fadeToggle()이 요소들을 점점 흐려지게(fade out) 합니다.

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

속도 매개 변수 선택은 효과의 지속 시간을 지정합니다. “slow”, “fast”또는 밀리 초 값을 사용할 수 있습니다.

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

다음 예제는 다른 매개 변수를 가진 fadeToggle() 메서드를 보여줍니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
      });
    });

jQuery fadeTo() 메서드는 주어진 불투명도^opacity (0과 1 사이의 값)로 페이딩을 허용합니다.

$(selector).fadeTo(speed, opacity, callback);

필요한 속도 매개 변수는 효과의 지속 시간을 지정합니다. “slow”, “fast”또는 밀리 초 값을 사용할 수 있습니다.

fadeTo() 메서드의 필수 불투명도 매개 변수는 주어진 불투명도 (0과 1 사이의 값)로 페이딩을 지정합니다.

콜백 매개 변수 선택은 함수가 완료된 후 실행되는 함수입니다.

다음 예제는 다른 매개 변수를 사용하는 fadeTo() 메서드를 보여줍니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeTo("slow", 0.15);
        $("#div2").fadeTo("slow", 0.4);
        $("#div3").fadeTo("slow", 0.7);
      });
    });

모든 jQuery 효과에 대한 전체 개요를 보려면, jQuery Effect Reference로 이동하십시오.