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

前回にひきつづき、jQueryのCustomエフェクトについて紹介します。今回は、animateメソッドの第3引数と第4引数です。

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

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

animate( params, duration, easing )

前回は、animateメソッドの第1引数だけを渡して幅や高さや不透明度などのCSSプロパティを操作するアニメーションと第2引数で速度を調整する方法を試しました。

今回まず、紹介するのは第3引数で「easing」つまり、アニメーションを徐々にゆっくりとしたり、急に変化させたりといった、動作方法を関数名で指定します。 jQueryでは、別途のエフェクトライブラリを使わなくても"linear" と "swing"の「easing」が使え、デフォルトでは、"swing"で動作します。

では、サンプルです。ボタンをクリックして "linear" と "swing"の違いを実際にお確かめください。



ボタンをクリックすると、高さ300pxまで"slow"でスライドし、次に、 幅300pxまで"fast"でスライドしてから、1,000ミリ秒(1秒)かけて不透明度0.2へ変化します。

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

<style>
.divs{
  height        :20px;
  width         :120px;
  padding       :4px;
  margin-top    :2px;
  background    :#cea8ff;
}
</style>
<div id="test1">
  <button class="jsbuttons" id="btn1">GO!</button>
  <div id="su0" class="divs"> easingを省略 </div>
  <div id="su1" class="divs"> linear </div>
  <div id="su2" class="divs"> swing </div>
</div>

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

   $("#btn1","#test1")
     .click(function () {
       $("#su0","#test1")
         .animate({width: "300px"},3000)
       $("#su1","#test1")
         .animate({width: "300px"},3000,"linear")
       $("#su2","#test1")
         .animate({width: "300px"},3000,"swing")
     })

 });
</script>

このように、 animateメソッドをドットでつないで書くことで、連続したアニメーションを簡単に書くことができます。 ここでは、それぞれの動作を、指定した"slow","fast",1秒の各速度で実行しています。

参考までに、jquery.js内部のeasingメソッドのコードを見ておきましょう。
コードは次のとおりです。

  easing: {
    linear: function( p, n, firstNum, diff ) {
      return firstNum + diff * p;
    },
    swing: function( p, n, firstNum, diff ) {
      return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;
    }
  

pは動作ステータス(経過時間n/動作時間duration)，nは動作しはじめてからの経過ミリ秒，firstNumは初期値で0，diffは1となっています。

つまり、このeasingメソッドを追加すればいろいろな動作を追加できるわけですが、当然すでにプラグインEasing pluginが作られていますので、これを利用することで簡単に複雑な動作を設定することもできます。

下のボタンをクリックしてみてください。



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

<script src="../jquery.js" type="text/javascript"></script>
<!--jquery.jsのあとにeasing.jsを読み込みます-->
<script src="../query.easing.1.3.js" type="text/javascript"></script>

<style>
.divs2{
  height        :20px;
  width         :120px;
  padding       :4px;
  margin-top    :2px;
  background    :#ffca40;
}
</style>
<div id="test2">
  <button id="btn1">GO!</button>
  <div id="su0" class="divs2"> easeOutBounce </div>
  <div id="su1" class="divs2"> easeInOutQuart </div>
  <div id="su2" class="divs2"> easeInBack </div>
  <div id="su3" class="divs2"> easeInSine </div>
  <div id="su4" class="divs2"> easeInOutElastic </div>
</div>

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

   $("#btn1","#test2")
     .click(function () {

       $(".divs2","#test2").css("width","120px")//リセット

       $("#su0","#test2")
         .animate({width:"300px"},3000,
              "easeOutBounce")
       $("#su1","#test2")
         .animate({width:"300px"},3000,
              "easeInOutQuart")
       $("#su2","#test2")
         .animate({width:"300px"},3000,
              "easeInBack")
       $("#su3","#test2")
         .animate({width:"300px"},3000,
              "easeInSine")
       $("#su4","#test2")
         .animate({width:"300px"},3000,
              "easeInOutElastic")
     })

 });
</script>

次ページでは、第4引数callbackを試します。