======jQuery Effects - Animation======
<WRAP left notice 70%>
  * description : jQuery Effects - Animation
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-15
</WRAP>
<WRAP clear></WRAP>
\\
%%jQuery%%로 커스텀 애니메이션을 만들 수 있습니다.\\

=====jQuery Animations - The animate() Method=====
%%jQuery%% ''animate()'' 메서드는 커스텀 애니메이션을 만드는 데 사용됩니다.\\

====Syntax====
<code jquery>
$(selector).animate({params},speed, callback);
</code>
\\
필수 %%params%% 매개 변수는 애니메이션이 될 CSS 속성을 정의합니다.\\
\\
속도 매개 변수 선택은 효과의 지속 시간을 지정합니다. "slow", "fast"또는 밀리 초 값을 사용할 수 있습니다.\\
\\
콜백 매개 변수 선택은 애니메이션이 완료된 후 실행되는 함수입니다.\\
\\
다음 예제는 ''animate()'' 메서드의 간단한 사용을 보여줍니다;\\ 
250px의 left 속성에 도달할 때까지 %%<div>%% 요소를 오른쪽으로 이동시킵니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("div").animate({ left: '250px' });
      });
    });
</code>
\\
  기본적으로 모든 %%HTML%% 요소는 정적 위치를 가지며 이동할 수 없습니다.
  위치를 조작하려면, 먼저 해당 요소의 CSS 위치 속성을 relative, fixed 또는 absolute로 설정해야 합니다!
\\
=====jQuery animate() - Manipulate Multiple Properties=====
다수의 속성을 동시에 애니메이션 할 수 있습니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("div").animate({
          left: '250px',
          opacity: '0.5',
          height: '150px',
          width: '150px'
        });
      });
    });
</code>
\\
===animate() 메서드를 사용하여 모든 CSS 속성을 조작할 수 있습니까?===
\\
  네, 거의! 그러나 기억해야 할 한 가지 중요한 사항이 있습니다: 
  모든 속성 이름은 animate() 메서드와 함께 사용할 때 카멜 케이스(camel-case)여야 합니다. 
  padding-left 대신 paddingLeft, margin-right 대신 marginRight 등으로 작성해야 합니다.
\\
  또한 색상 애니메이션은 core %%jQuery%% 라이브러리에 포함되어 있지 않습니다.
  색상에 애니메이션을 적용하려면, %%jQuery.com%%에서 색상 애니메이션 플러그인을 다운로드 해야 합니다.
\\
=====jQuery animate() - Using Relative Values=====
relative 값을 정의할 수도 있습니다 (해당 값은 요소의 현재 값에 상대적입니다).\\ 
값 앞에 %%+ =%% 또는%%-=%%를 입력하여 실행됩니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("div").animate({
          left: '250px',
          height: '+=150px',
          width: '+=150px'
        });
      });
    });
</code>

=====jQuery animate() - Using Pre-defined Values=====
속성의 애니메이션 값을 ''"show"'', ''"hide"'' 또는 ''"toggle"''로 지정할 수도 있습니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("div").animate({
          height: 'toggle'
        });
      });
    });
</code>

=====jQuery animate() - Uses Queue Functionality=====
기본적으로, %%jQuery%%는 애니메이션을 위한 __대기열 기능__(queue functionality)과 함께 제공됩니다.\\
\\
즉, 다수의 ''animate()'' 호출을 서로 작성하는 경우, %%jQuery%%는 이러한 메서드 호출을 사용하여\\ 
"내부" 대기열을 생성합니다. 그런 다음 애니메이션 호출을 차레대로 실행합니다.\\
\\
따라서 서로 다른 애니메이션을 실행하려는 경우, 대기열 기능을 활용합니다.\\

====예제 1====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        var div = $("div");
        div.animate({ height: '300px', opacity: '0.4' }, "slow");
        div.animate({ width: '300px', opacity: '0.8' }, "slow");
        div.animate({ height: '100px', opacity: '0.4' }, "slow");
        div.animate({ width: '100px', opacity: '0.8' }, "slow");
      });
    });
</code>
\\
아래 예제에서는 먼저 ''%%<div>%%'' 요소를 오른쪽으로 이동한 다음, 텍스트의 글꼴 크기를 늘립니다:\\

====예제 2====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        var div = $("div");
        div.animate({ left: '100px' }, "slow");
        div.animate({ fontSize: '3em' }, "slow");
      });
    });
</code>


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


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