jQueryでアニメーション初歩の初歩!「ボックスを移動させる」の巻

アニメーション初歩の初歩

今までは、最初にjQueryのプラグインを使わせて、慣れてきたら自作させるようにしていましたが・・・ なかなか自作しない(笑)

ということで、今年はプラグインの存在を教えずに、最初から自作させる方向で考えてます。

ということで、最初はこれぐらいですかね?といっても9月からJavaScriptを始めるので、jQueryやるのはもう少し先だけど。

PR

まずは考え方

  1. 幅と高さが50pxのボックスを作ります。分かりやすいようにborderやbackground-colorを付けておきましょう!
  2. CSSで最初の座標(50,100)を指定しておきます。
  3. 今回は、トリガーとしてボックス自体をクリックされたらアニメーションを開始します。
  4. jQueryで移動先の座標(150,120)を指定して移動させます。

ボックスの移動

実際に動かしてみましょう!

↑上のボックスをクリックしてください。

 

HTMLの記述

idかclassで名前を付けます。今回はidにしました。

 

CSSの記述

jQueryでアニメーションさせるには、positionでabsolute(絶対座標)かrelative(相対座標)を指定します。これがないと動きません。

leftでX座標、topでY座標を指定します。

 

jQueryの記述

$(“#box”).click(function(){
  クリックした時に実行する処理
  ここでanimateを使用します。
});
※セレクタに「#box」を指定しているので、idでboxを指定している要素がクリックされた時

$(“#box”).animate({
  ここで記述した状態にアニメーションします。
});
※ここもセレクタに「#box」を指定しているので、idでboxを指定している要素が変化します。

最初の位置アニメーション後の位置
top:100px;top:120px;
left:50px;left:150px;

PR

 

まとめ

まとめて記述するとこうなります。6行目をハイライトしていますが、jQueryの本体を忘れないようにしましょう。

少しずつマスターしてカッコいいWebページを作りましょう!

 

PR

関連記事