質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

4196閲覧

anime.jsが動作しない

kft123

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/05/23 00:35

前提・実現したいこと

anime.jsを使ってアニメーションをしたいのですが、サンプルなどをまねてみてもうまく動作しません。

発生している問題・エラーメッセージ

開発者ツールを使ってみてもエラーメッセージはなし

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 7 <script src="js/anime.min.js"></script> 8 <script type="text/javascript" src="js/myanimation.js"></script> 9 <link rel="stylesheet" href="style.css"> 10 </head> 11 <body> 12 <div id="cssSelector"> 13 <div class="line"> 14 <div class="square el"></div> 15 </div> 16 </div> 17 </body> 18</html> 19

css

1.square { 2 height:50px; 3 width:50px; 4 background-color:red; 5}

js

1var cssSelector = anime({ 2 targets: '#cssSelector .el', 3 translateX: 250 4});

試したこと

anime.min.jsの保存位置の変更やChromeとEdge両ブラウザを用いての動作確認。
また、anime.min.js読み込みの「type="text/javascript"」の文言はあってもなくても動作しませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/23 01:08

その、まねたサンプルがある記事をご提示願えますか?
m.ts10806

2018/05/23 01:58

次からで結構なので参考先などは質問の情報としては重要なので質問本文に追記してください。コメントだと他の閲覧者の目に付きにくいです。
guest

回答1

0

ベストアンサー

jsの読み込み記述を</body>の前にしてください。

html

1 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 2 <script src="js/anime.min.js"></script> 3 <script type="text/javascript" src="js/myanimation.js"></script> 4</body> 5

今の書き方そのままだと<body>内の読み込みが行われる前にJavaScriptが動作します。
つまり対象の<div>が表示される前、ですね。
どうしても<head>内に書きたいのでしたら例えば下記のように「HTML読み込み後」と明示的に書かなければなりません。

js

1$(function(){ 2 var cssSelector = anime({ 3 targets: '#cssSelector .el', 4 translateX: 250 5 }); 6});

</body>前に置いたとしても、あったほうが動作タイミングが明示的になるので、やはり書くべきと個人的には思います。

ちなみに、type="text/javascript"は基本的に省略しても問題ありませんので、書いてある方が丁寧ではありますが、「ある・ない」がスクリプトに影響を及ぼすことはまずないはずです。

私のほうが必須な場面に出会ったことがないだけかもしれませんが。
追記:
気になったので調べてみました。

  • [stackoverflow:script タグの type=“text/javascript” の有無による違い

](https://ja.stackoverflow.com/questions/35646/script-%E3%82%BF%E3%82%B0%E3%81%AE-type-text-javascript-%E3%81%AE%E6%9C%89%E7%84%A1%E3%81%AB%E3%82%88%E3%82%8B%E9%81%95%E3%81%84)

html5でデフォルト値で処理するようになったので不要となった ということですね。

投稿2018/05/23 01:18

編集2018/05/23 01:21
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kft123

2018/05/23 01:57

おっしゃる通り記述を最後にすることで動作させることが出来ました! 適切、丁寧なご回答ありがとうございます!
m.ts10806

2018/05/23 01:59

解決できたようで何よりです。 jQueryの場合は$(function(){ はおおよそ必須だと思いますので、覚えておいてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問