Help us understand the problem. What is going on with this article?

Javascriptでアニメーションするメモ(JQuery使います)初心者用

More than 5 years have passed since last update.

結構簡単にJavascriptで動きます。

logo-100-100.png 実はすごく苦手なJavascriptですが、やってみると割と簡単でした。(初心者用)
Javascriptって苦手だったけど、やってると楽しくなってきます。
僕のような苦手意識のある方向けです。

JQueryを読込みます。

HTML5で書いてる時と、そうでない時は記法が少し違うので注意。
最近はHTML5で書く事にしてる。IE早く対応してくれ…。

HTML5の時
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
それ以外
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

僕はJQuery自体をjsフォルダの中に置く事が多いんだけど、それってどうなんだろう。
読み込みスピードとかの違いか??

サーバーに置いてある時
<script src="./js/jquery-1.7.2.min.js"></script>

この時点で疑問だもんなぁ…。
JQueryのバージョンとか、サーバーに置くとどう違うとか。
全然知らない。勉強しないと。

とりあえず動かしてみたい。

star-100-100.png いや、まぁとりあえずそう思うわ。

まぁ、勉強し始めの時には「とりあえず動かしたい!」と思ってました。
サイト作ってると動かす事ってあんまりなかったりしますけどね。
はじめは隠れててアクションすると出てくるヤツとかはSEO的にどうなんだろう…。
とかっていう情報もあるので使いどころを迷います。

ページが表示されたら動かす。

まず、そのページに移った瞬間からアニメーションをスタートするタイプ。
書き方はこの他にもあると思いますが、ここは僕の好みで書いてます。

● box1 というクラス要素を動かします。
● 左からの距離50%の位置まで動かします。
● 5000マイクロ秒かけて移動します。

すぐ動かす
$(function() {
          $('.box1').animate({
            'left': '50%'
          },5000);
});

こういうCSSの時の例です。

CSS
.box1 {
position: absolute;
top: 20px;
left: 0;
width: 20%;

例えばCSSでmarginで距離を作っている場合はJavascriptの時は書き方に注意が必要。
● marginLeft という感じで書く。
● margin-left ではない。

Javascript

分解するとこう

基本
$(function() {
      この中に書く
});
アニメーション
$(function() {
          $('.box1')//////////////ここで要素を指定
             .animate({//////////アニメーションするよ
            'left': '50%'//////左から50%の所までいくよ
          },5000);///////////////5秒かけていくよ
});

普段はあんまり改行しません。
あ、時間指定する場合は秒数の前に「, 」忘れないように。

こんな感じ
$(function() {
 $('.box1').animate({'left': '50%'},5000);
});

ボタンを押したら動かす。

何かボタン的なモノを押したら動くようにする。
ボタン自体もdivで囲ってます。

● 時間指定してません。
● div 要素が id の場合は # です。

押したら動く
$('.botan1').click(function(){
    $('#box1').animate({'marginLeft': '500px'});
});

同時に色んな動きを出したい。

● 指示をカンマ( , )で区切る。
● 最後の指示はカンマいらない。

同時に動かす
          $('.box2')
.animate({
      'width': '45%',
      'right': '-15%',
      'top': '-15%'
},5000);

連続で動かしたい。

● .animate ごとに動きます。

連続で動かす
$('.koumori1')
.animate({ 'right': '15%', 'top': '15%'},1000)
.animate({ 'right': '25%', 'top': '5%'},1000)
.animate({ 'right': '15%', 'top': '15%'},600);

触ってると楽しい

heart-100-100.png
こうやってカッコいい動きのメニューとか作ると良いかも。
今まで「JQuery ナビゲーション」とかで検索して、配布してくれてるやつとか使ってたけど、これでやっと自分の好きな動きのを作れる。
イイのが出来たら今までの恩返しに配布とか出来たらイイなぁ…。

tabo_purify
WEBに特化しています。 その他の言語は分かりません。 間違いを発見した方はご指摘くださいませ。
https://labo-iwasaki.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away