jQuery로 커스텀 애니메이션을 만들 수 있습니다.

jQuery animate() 메서드는 커스텀 애니메이션을 만드는 데 사용됩니다.

$(selector).animate({params},speed, callback);

필수 params 매개 변수는 애니메이션이 될 CSS 속성을 정의합니다.

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

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

다음 예제는 animate() 메서드의 간단한 사용을 보여줍니다;
250px의 left 속성에 도달할 때까지 <div> 요소를 오른쪽으로 이동시킵니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("div").animate({ left: '250px' });
      });
    });

기본적으로 모든 %%HTML%% 요소는 정적 위치를 가지며 이동할 수 없습니다.
위치를 조작하려면, 먼저 해당 요소의 CSS 위치 속성을 relative, fixed 또는 absolute로 설정해야 합니다!

다수의 속성을 동시에 애니메이션 할 수 있습니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("div").animate({
          left: '250px',
          opacity: '0.5',
          height: '150px',
          width: '150px'
        });
      });
    });

네, 거의! 그러나 기억해야 할 한 가지 중요한 사항이 있습니다: 
모든 속성 이름은 animate() 메서드와 함께 사용할 때 카멜 케이스(camel-case)여야 합니다. 
padding-left 대신 paddingLeft, margin-right 대신 marginRight 등으로 작성해야 합니다.

또한 색상 애니메이션은 core %%jQuery%% 라이브러리에 포함되어 있지 않습니다.
색상에 애니메이션을 적용하려면, %%jQuery.com%%에서 색상 애니메이션 플러그인을 다운로드 해야 합니다.

relative 값을 정의할 수도 있습니다 (해당 값은 요소의 현재 값에 상대적입니다).
값 앞에 + = 또는-=를 입력하여 실행됩니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("div").animate({
          left: '250px',
          height: '+=150px',
          width: '+=150px'
        });
      });
    });

속성의 애니메이션 값을 “show”, “hide” 또는 “toggle”로 지정할 수도 있습니다.

    $(document).ready(function () {
      $("button").click(function () {
        $("div").animate({
          height: 'toggle'
        });
      });
    });

기본적으로, jQuery는 애니메이션을 위한 대기열 기능(queue functionality)과 함께 제공됩니다.

즉, 다수의 animate() 호출을 서로 작성하는 경우, 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");
      });
    });

아래 예제에서는 먼저 <div> 요소를 오른쪽으로 이동한 다음, 텍스트의 글꼴 크기를 늘립니다:

    $(document).ready(function () {
      $("button").click(function () {
        var div = $("div");
        div.animate({ left: '100px' }, "slow");
        div.animate({ fontSize: '3em' }, "slow");
      });
    });

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