【Javascript】jQueryのCustomエフェクト4

今回も、前回の続きで、 Customエフェクトから animateメソッドの第2引数optionsをみていきます。

jQueryの取得などについては下記リンクをご参照ください。

• jQuery
  • jquey.jsのダウンロード
• jQuery ドキュメント API/1.x/Custom
• jQueryのダウンロードと設置

animate( params, options )の options.complete

前回は、animateメソッドの第2引数のプロパティに duration とeasing を渡す方法を試してみました。 今回は、残りのcomplete、step、queueについて調べてみます。

まず、はじめに、completeです。

これはanimate( params, duration, easing, callback )でcallback引数として指定した関数と同じです。動作完了後に起動させる関数で、アニメーション終了後に動作します。

では、サンプルです。ボタンをクリックしてみてください。

ボタンをクリックすると、まずフェイドアウトして消え、ダイアログで「終了」と表示されます。 opacity値を"toggle"にしてありますので、もう一度クリックすると、逆に、今度はフェイドインして最後に「終了」と表示されます。

コードは次のとおりです。

<style>
.divs{
  height        :120px;
  width         :120px;
  padding       :4px;
  margin-top    :2px;
  background    :#cea8ff;
}
</style>
<div id="test1">
  <button id="btn1">GO!</button>
  <div id="su1" class="divs"> TEST </div>
</div>

<script type="text/javascript">
 jQuery(function($){

  $("#btn1")
    .click(function () {
      $("#su1")
        .animate({
            opacity  : "toggle"
          },{             complete : function(){                alert("終了")             }
          })
    })

 });
</script>

第2引数で渡したオブジェクトのcompleteメソッドが、アニメーションの動作完了時に実行されているわけです。

このように、completeは、動作完了後に起動させる関数を指定するのですが、上記サンプルのように、無名関数を直接書くのではなく、別の関数やメソッドの名前を指定することも可能です。ちょっと試してみましょう。

ボタンをクリックすると、上のサンプルと同じ動作をします。

コードは次のとおりです。

<style>
.divs{
  height        :120px;
  width         :120px;
  padding       :4px;
  margin-top    :2px;
  background    :#cea8ff;
}
</style>
<div id="test2">
  <button id="btn2">GO!</button>
  <div id="su2" class="divs"> TEST </div>
</div>

<script type="text/javascript">
 function onEndTest(){   alert("終了") }

jQuery(function($){

  $("#btn2")
    .click(function () {
      $("#su2")
        .animate({
            opacity  : "toggle"
          },{
            complete : onEndTest
          })
    })

});
</script>

ボタンをクリックすると、動作終了後に、complete : onEndTest の指定によって関数onEndTestが呼ばれ、ダイアログで「終了」と表示されます。

では、次ページでは、stepプロパティを試します。