======jQuery Effects - Fade======
<WRAP left notice 70%>
  * description : jQuery Effects - Fading
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-15
</WRAP>
<WRAP clear></WRAP>
\\

=====jQuery Fading Methods=====
%%jQuery%%로, 요소를 시야에서 점점 또렷해지거나 점점 흐려지게 할 수 있습니다.\\
\\
%%jQuery%%에는 다음과 같은 fade 메소드가 있습니다.\\
  * ''fadeIn()''
  * ''fadeOut()''
  * ''fadeToggle()''
  * ''fadeTo()''

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

====Syntax====
<code jquery>
$(selector).fadeIn(speed, callback);
</code>

$ (selector) .fadeIn (speed, callback);
속도 매개 변수 선택은 효과의 지속 시간을 지정합니다. "slow", "fast"또는 밀리 초 값을 사용할 수 있습니다.\\
\\
콜백 매개 변수 선택은 페이딩(fading)이 완료된 후 실행되는 함수입니다.\\
\\
다음 예제는 다른 매개 변수를 가진 ''fadeIn()'' 메서드를 보여줍니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
      });
    });
</code>

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

====syntax:====
<code jquery>
$(selector).fadeOut(speed,callback);
</code>
\\
속도 매개 변수 선택은 효과의 지속 시간을 지정합니다. "slow", "fast"또는 밀리 초 값을 사용할 수 있습니다.\\
\\
콜백 매개 변수 선택은 페이딩(fading)이 완료된 후 실행되는 함수입니다.\\
\\
다음 예제는 다른 매개 변수를 가진 ''fadeOut()'' 메서드를 보여줍니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeOut();
        $("#div2").fadeOut("fast");
        $("#div3").fadeOut(2000);
      });
    });
</code>

=====jQuery fadeToggle() Method=====
%%jQuery%% ''fadeToggle()'' 메서드는 ''fadeIn()'' 및 ''fadeOut()'' 메서드 사이를 토글합니다.\\
\\
요소가 페이드 아웃 되면, ''fadeToggle()''이  요소들을 점점 또렷하게(fade in) 합니다.\\
\\
요소가 페이드 인 되면, ''fadeToggle()''이  요소들을 점점 흐려지게(fade out) 합니다.\\

====Syntax====
<code jquery>
$(selector).fadeToggle(speed,callback);
</code>
\\
속도 매개 변수 선택은 효과의 지속 시간을 지정합니다. "slow", "fast"또는 밀리 초 값을 사용할 수 있습니다.\\
\\
콜백 매개 변수 선택은 페이딩(fading)이 완료된 후 실행되는 함수입니다.\\
\\
다음 예제는 다른 매개 변수를 가진 ''fadeToggle()'' 메서드를 보여줍니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
      });
    });
</code>

=====jQuery fadeTo() Method=====
%%jQuery%% ''fadeTo()'' 메서드는 주어진 불투명도<sup>opacity</sup> (0과 1 사이의 값)로 페이딩을 허용합니다.\\
\\
====Syntax====
<code jquery>
$(selector).fadeTo(speed, opacity, callback);
</code>
\\
필요한 속도 매개 변수는 효과의 지속 시간을 지정합니다. "slow", "fast"또는 밀리 초 값을 사용할 수 있습니다.\\
\\
''fadeTo()'' 메서드의 필수 불투명도 매개 변수는 주어진 불투명도 (0과 1 사이의 값)로 페이딩을 지정합니다.\\
\\
콜백 매개 변수 선택은 함수가 완료된 후 실행되는 함수입니다.\\
\\
다음 예제는 다른 매개 변수를 사용하는 ''fadeTo()'' 메서드를 보여줍니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").fadeTo("slow", 0.15);
        $("#div2").fadeTo("slow", 0.4);
        $("#div3").fadeTo("slow", 0.7);
      });
    });
</code>

=====jQuery Effects Reference=====
모든 %%jQuery%% 효과에 대한 전체 개요를 보려면, [[https://www.w3schools.com/jquery/jquery_ref_effects.asp|jQuery Effect Reference]]로 이동하십시오.\\


{{tag>오션 jQuery Effects - Fade}}