
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.07.31
jQuery の animate メソッドを使用すると、簡単なアニメーションを作成することができます。
今回は、jQuery の animate メソッドについてサンプル等を紹介したいと思います。
1.animate メソッド
2.animate で横に動くアニメーション
3.animate で速度の違うアニメーション
jQuery の animate メソッドは、引数に 以下の項目を指定して アニメーションを作成します。
animate メソッドの引数は、次のように 2 通りの記述方法があります。
$(セレクタ).animate(properties [, duration] [, easing] [, complete]);
$(セレクタ).animate(properties, options);
そして、animate メソッドの引数の内容は、それぞれ以下の通りです。
.animate( properties [, duration] [, easing] [, complete] )
properties 最終形の CSS の値を指定 duration アニメーションする時間をミリ秒単位で指定
初期値:400easing イージングの種類を指定
初期値:swingcomplete アニメーションが完了した時に実行したい処理を指定
.animate( properties, options )
properties 最終形の CSS の値を指定
options duration
アニメーションする時間をミリ秒単位で指定(初期値:400)easing
イージングの種類を指定(初期値:swing)queue
falseを指定すると、キューに追加されずに即座にアニメーションを実行できる(初期値:true)
追加するキューを文字列で指定することも可能specialEasing
CSSプロパティのマップ値を指定すると その効果がイージングに反映step
各要素の各プロパティから呼び出される関数で、アニメーションのフレームが進むたびに実行する処理を指定progress
各アニメーションのステップ後に、アニメーション要素毎に 1 度だけ呼び出される関数complete
アニメーションが完了した際に呼びだされる関数done
アニメーション完了後に呼び出される関数fail
アニメーションの完了が失敗した際に呼び出される関数always
アニメーションが完了 又は 停止した際に呼び出される関数
animate メソッドを使用して、ボックスが横に動くアニメーションを作成します。
往 ボタン、復 ボタン の順にクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn1").click(function() { $("#box1").animate({ marginLeft:"95%" }); }); $("#btn2").click(function() { $("#box1").animate({ marginLeft:"0px" }); }); }); //--> </script> <div style="background-color : #CCC; padding : 20px 20px 3px;"> <div id="box1" style="height:30px; width:30px; background-color:mediumorchid;"></div> <input type="button" id="btn1" value="往"> <input type="button" id="btn2" value="復"> </div>
上のサンプルは「 .animate( properties [, duration] [, easing] [, complete] ) 」の記述方法で、プロパティのみを指定しています。
通常の CSS では ハイフン( – )を使って「 margin-left 」と記述するようなプロパティを、animate メソッドでは、単語間の最初の文字を大文字にするキャメルケースという書式で「 marginLeft 」と記述します。
また、「 marginLeft 」の代わりに「 marginTop 」を指定すると、縦に動くアニメーションを作成することができます。
animate メソッドを使用して、速度の違うアニメーションを作成します。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn3").click(function() { $("#box2") .animate({marginLeft:"95%"}, 100) .animate({marginTop:"+=50px"}, 100) .animate({marginLeft:"0px"}, 100) .animate({marginTop:"-=50px"}, 100) }); $("#btn4").click(function() { $("#box2") .animate({marginLeft:"95%"}, 700) .animate({marginTop:"+=50px"}, 700) .animate({marginLeft:"0px"}, 700) .animate({marginTop:"-=50px"}, 700) }); }); //--> </script> <div style="background-color : #CCC; padding : 20px 20px 3px;"> <div id="box2" style="height:30px; width:30px; background-color:crimson;"></div> <input type="button" id="btn3" value="100ミリ秒"> <input type="button" id="btn4" value="700ミリ秒"> </div>
上のサンプルは「 .animate( properties [, duration] [, easing] [, complete] ) 」の記述方法で、時間( duration )まで指定しています。
1 つのアクションで複数の動き(上のサンプルでは右→下→左→上)を設定する場合は、上記のように記述して animate メソッドを必要な数だけ呼び出します。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.