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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1184閲覧

jQueryにて秒数を指定するとアニメーションが実装されない

kenshou

総合スコア9

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/06/28 04:30

jQueryにてアニメーションのpuffを秒数をしていして実装したいのですがエラーが発生してしまいできません。

<!doctype html> <html lang="jp"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP::wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="common/style.css"> <title>AIRFIT</title> </head> <body> 下記がアニメーションのエフェクトを加えたい画像です↓ <img class="top-censor" src="common/img/top-censor.png"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   <!--↓これがあるとスライドダウンのアニメーションが実装されない--> <!--<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>--> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script> <script src="common/script.js"></script> </div> </body> </html>
script.js部分 $(function(){ $( ".top-censor" ).hide(); $( document ).scroll(function() { $( ".top-censor" ).show( "puff" ,{ }, 2000); }); });

出てしまうエラー

jquery-3.3.1.min.js:2 Uncaught TypeError: w.easing[this.easing] is not a function at init.run (jquery-3.3.1.min.js:2) at u (jquery-3.3.1.min.js:2) at Function.w.fx.tick (jquery-3.3.1.min.js:2) at at (jquery-3.3.1.min.js:2)

調べると
出たエラーが時間指定に関するところでしたので

試したこととして
・$(functionでくくってあげる

・$ではなくjQueryに変えてみる

をしたのですが同じエラーが発生してしまいます

どなたかわかる方おりましたら教えていただけると幸いです。
よろしくお願いいたします。

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

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

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

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

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

m.ts10806

2020/06/28 04:31

第2引数なにも指定してないのはどういう意図ですか?
kenshou

2020/06/28 04:37

いえ、特に意図はございません。 テストとしてやっております。
m.ts10806

2020/06/28 04:41

いえ、何を参考に書いたのか知りたくて
guest

回答1

0

ベストアンサー

$( ".top-censor" ).show( 2000, "puff" );では?

【.show() | jQuery API Documentation】
https://api.jquery.com/show/#show-duration-easing-complete

.show( duration [, easing ] [, complete ] )


jQuery UI のバージョンが古いのも気になります。

【jQuery UI – All Versions | jQuery CDN】
https://code.jquery.com/ui/

投稿2020/06/28 04:39

kei344

総合スコア69606

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

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

kenshou

2020/06/28 04:42

ご回答ありがとうございます! 試してみたのですが、依然として同じエラー発生してしまいます(;^_^A
kei344

2020/06/28 04:46

試しているページがhttpsだったりしませんか?
kenshou

2020/06/28 04:52

はい、AWSのローカル環境にてやっております故、httpsかと思われます。
kei344

2020/06/28 05:04

あと、scrollイベントの中でアニメーションコードを入れると、スクロール中に何度もアニメーションする指令が飛ぶので、描画がおかしくなる可能性はあります。スクロールが終わったタイミングとか、少し間引いて実行するほうが良いことが多いです。
kenshou

2020/06/28 05:10

うおおおお!! 今解決いたしました! 感動です! まさか「http」に問題があったなんて、、 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問