「アニメーション」の３回目です。
今回もanimateメソッドのサンプルの紹介ですが、
前回よりももう少し難易度を上げたいと思います。
いかがでしたか？
調べてみると、
もっと複雑なアニメーションもできるようです。
近いうちに挑戦したいですね。
それでは、また。
今回もanimateメソッドのサンプルの紹介ですが、
前回よりももう少し難易度を上げたいと思います。
●animateメソッドのサンプル（応用）
7.複数のエフェクトを直列に動かす
直列に動かすためには、
最初のエフェクトが『終わったら』次を実行するようにします。
今回は「complete」の引数を利用して実現しています。
最初のエフェクトが『終わったら』次を実行するようにします。
今回は「complete」の引数を利用して実現しています。
$("#animate7-Target1").animate(
{marginLeft: "+=100"},
1000,
"swing",
function() {
$("#animate7-Target2").animate(
{marginLeft: "+=100"},
1000,
"linear"
);
}
);
swing
linear
8.複数のエフェクトを並列に動かす
並列に動かすためには、動かしたいエフェクトを続けて書くだけです。
$("#animate8-Target1").animate({marginLeft: "+=100"}, 1000, "swing");
$("#animate8-Target2").animate({marginLeft: "+=100"}, 1000, "linear");
swing
linear
9.エフェクトをループさせる
ループさせるためには、
jQueryではなくJavaScriptの「setTimeout（mozillaのAPIリファレンスはこちら）」を使います。
今回の例では『3秒間に左から右に丸いオブジェクトを延々と移動』させてます。
jQueryではなくJavaScriptの「setTimeout（mozillaのAPIリファレンスはこちら）」を使います。
今回の例では『3秒間に左から右に丸いオブジェクトを延々と移動』させてます。
$(function() {
// (1)実行ボタン押下で「setTimeout」を起動（JavaScriptの関数を実行）
$("#animate9-Trigger input[type=button]").click(function(){
setTimeout("loopAnimate()");
});
});
function loopAnimate() {
// (2)animateでオブジェクトを移動（左⇒右・・・移動が完了したら左へ戻す）
$("#animate9-Target").animate({marginLeft: "350px"}, 3000)
.animate({marginLeft: "-100px"}, 0)
// (3)もう一度「setTimeout」を起動（後は(2)～(3)の繰り返し）
setTimeout("loopAnimate()", 3000);
}
loop
いかがでしたか？
調べてみると、
もっと複雑なアニメーションもできるようです。
近いうちに挑戦したいですね。
それでは、また。
