フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

CSS3で、横から移動してくるアニメーション(jqueryでclassを付けるだけ)

自分が初心者なので、出来るだけ丁寧に書いています。
js初心者でわりと右も左もわからんよって人対象です。
また、前提として、jsの記述自体は正しいという前提です。

動かねぇよ!!って時にまず確認すること

js書いて組み込むだけだったんだけど、読み込まれねぇ!!

状況を確認するため、chromeのデベロッパーツールのconsoleを確認。

すると、エラーが出ていました。

Uncaught ReferenceError: jQuery is not defined

jQueryが定義されてないよって言われてますね。

ソースを確認して見ると、

<html>
  <head></head>
  <body>
    ・・・・・・・
    ・・・・・・・
    ・・・・・・・
  <script>
     jQuery(function(){
          alert("Hello")
     });
  </script>
    </body>
</html>

何か足りない…はっ!!srcがねぇ!!
いつもなんとなく使っているsrc、もちろん意味があります。
jQueryを読み込む役割を担っています。
jQueryを使いたいなら先に読み込みなさいということですね。

なので下記を追加しましょう。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<html>
  <head></head>
  <body>
    ・・・・・・・
    ・・・・・・・
    ・・・・・・・
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
     jQuery(function(){
          alert("Hello")
     });
  </script>
    </body>
</html>

ここで気をつけるのはsrcの記述する位置です。

  <script>
     jQuery(function(){
          alert("Hello")
     });
  </script>

jQueryを定義するよりも前に記述する必要があります。

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
     jQuery(function(){
          alert("Hello")
     });
  </script>

そうしないと<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

記述していてもUncaught ReferenceError: jQuery is not definedというエラーを吐きます。
srcも追加したのにエラー文変わりもしないよ!!ってならないように注意して下さい。

src追加したけど動かねぇよ?

srcも追加した。

追加する位置も間違えていない。なのにまだエラーが出る人はURLを確認しましょう。

正しくjQueryを読み込めていない可能性があります。

ソースに追加しているURLをコピーしてブラウザで検索してみて下さい。

/*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license

こんな感じの文字列から始まる画面が表示されます。
上記のような文字がブラウザに表示されていない場合はURLが間違っている可能性があリます。
確認してみましょう。

URLも正しいけど動かねぇよ?

URLはブラウザで確認して正しいっぽい。

なのにjsが動かない時は再度URLを確認しましょう。

実はsrcで読み込んでいるURLと自分がjsを効かせたいサイトのURLは依存関係にあります。
(正確にはHTTPプロトコルの部分です)

https(保護された通信)から始まるサイトだとjQueryがブロックされ反映されません。

つまり、

サイトのURLが~で始まる場合

[src]
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js ← ok

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js ← ok

サイトのURLが~で始まる場合

[src]
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js ← no

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js ← ok

上記のhttpから始まるURL以外の書き方で
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jsというのもあります。
上記はサイトのURLがhttp or httpsのどちらでも動きます。

まとめ

確認すること
・srcの有無と位置
・srcのURLが正しいか否か
・srcのHTTPプロトコルはサイトに対応できているのか

以上を確認すればきっとあなたのjsは動いているでしょう。

※jsの記述自体に誤りがないことを前提にしています。

参考サイト

“https” だと jQuery が動かない時には
【jQuery】プログラム動かない時に確認すること

[紹介元] jQueryタグが付けられた新着投稿 – Qiita CSS3で、横から移動してくるアニメーション(jqueryでclassを付けるだけ)

コメント

記事に戻る

コメントを残す