お、要素やんけ！動かしたろ。

animeteです。
指定秒数をかけて、指定CSSへと変化させていきます。

animate

引数は４つとなります。
第一引数：CSSプロパティと値(変化させる最終の値)
第二引数：アニメーションさせる秒数
第三引数：easing
第四引数：completeコールバック

第一引数について

記述方法は、単品の時と複数の時とで記述方法を変えることもできますが
基本複数の時の手法(オブジェクト型記述)でやりましょう。
ちなみに有効なCSSとしては、数値部分のみとなります。
color等文字列での指定は動きません。動かしたい場合はライブラリを探しましょう。

第二引数について

毎度おなじみのミリ秒指定です。

第三引数について

easing フェードとかの時にお話しましたものと同じです。
デフォルトでは少ないので、プラグインを使うようにしましょう。

第四引数について

いつもどおりのコールバックです。
特記事項はありません。

$(function() {
  $('.ani1').on('click',function()
  {
    $('#ani1Elem').animate(
    {
      'width':'200px',
      'height':'200px'
    },2000,'',function()
    {
      setTimeout(function()
      {
        $('#ani1Elem').css(
          {
            'width':'100px',
            'height':'100px'
          }
        );
      },3000)
    })
  })
});

delay

キューのお話を前にしました。
で、そのキューの実行を遅らせるのがこのdelayです。
引数は１つ

第一引数

ミリ秒指定で、その分実行を遅らせる事ができます。

  $('.ani2').on('click',function()
  {
    $('#ani2Elem').animate(
    {
      'left':'300px'
    },2000,'',function()
    {
      setTimeout(function()
      {
        $('#ani2Elem').css(
          {
            'left':'0px',
          }
        );
      },3000);
    });
    $('#ani3Elem').animate(
    {
      'left':'300px'
    },2000,'',function()
    {
      setTimeout(function()
      {
        $('#ani3Elem').css(
          {
            'left':'0px',
          }
        );
      },3000);
    });
  });

  // ディレイあり
  $('.ani3').on('click',function()
  {
    $('#ani2Elem').animate(
    {
      'left':'300px'
    },2000,'',function()
    {
      setTimeout(function()
      {
        $('#ani2Elem').css(
          {
            'left':'0px',
          }
        );
      },3000);
    });
    $('#ani3Elem').delay(1500).animate(
    {
      'left':'300px'
    },2000,'',function()
    {
      setTimeout(function()
      {
        $('#ani3Elem').css(
          {
            'left':'0px',
          }
        );
      },3000);
    });
  });

stop

現在実行中のアニメーションを中止します。
引数は2つです。

第一引数

引き続き記述されているアニメーション処理を削除するかどうかを指定します
bool型での指定となります。
trueで後続のアニメーション処理は削除
falseで後続のアニメーションは続行
となります。falseがデフォルトです。

第二引数

現アニメーションを即座に完了するかどうかを指定します。
bool型での指定となります。
trueを指定すると、現アニメーションはアニメーション最終値まで飛びます。
falseを指定すると、現アニメーションはその場で止まります。
falseがデフォルトです。

デモ

left:300pxを2秒かけて実行
続いて2秒かけてleft:0pxに戻しています。