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

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

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

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

Q&A

解決済

3回答

348閲覧

fadeIn();が効きません

saruasru

総合スコア13

JavaScript

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

0グッド

0クリップ

投稿2017/12/18 03:37

編集2017/12/22 06:13

現在、webでおみくじを作成しています。
おみくじの結果をフェードインで表示させたいのですが、それが上手くできず止まってしまっています。。
恐れ入りますがご教授お願いいたします。m(_ _)m

やりたいこと
画像をクリックorスマホを振るとランダムで出て来た結果がフェードインで表示される。

javascript

1<script> 2 //おみくじの結果をランダムで表示 3 function getOmikuji () { 4 var omikuji = ["id1","id2","id3"]; 5 var index = Math.floor(Math.random() * omikuji.length); // ランダムで0-2の値を取得 6 var id = omikuji[index]; // ランダムで取得した値に対応するidを取得 7 var el = document.getElementById(id); // idに対する要素を取得 8 var result = el.outerHTML; // div内のtextを取得 9 10 document.getElementById('result').innerHTML = result; // 結果を表示 11 } 12 13 //結果の表示・非表示 14 $(function(){ 15 16 $('#btn').click(function(){ 17 //フェードインで表示 18 $('result').fadeIn(); //⇦ここが効きません 19 //ボタンを非表示にする 20 $(this).hide(); 21 }); 22 23 }); 24 25 26 //スマホを振るとおみくじ結果がでる 27 $(document).ready(function() { 28 $(this).gShake(function() { 29 var clickMe = document.getElementById('btn'); 30 clickMe.click(); 31 }); 32 }); 33</script>

css

1body{ 2 background-color: #4c4c4c; 3 color: #FFFFFF; 4} 5main{ 6 margin: 0 auto; 7 max-width: 700px; 8} 9h1{ 10 text-align: center; 11 line-height: 1.5; 12} 13h1 img{ 14 width: 100%; 15} 16p{ 17 text-align: center; 18} 19.txt-1{ 20 font-size: 14px; 21 line-height: 1.5; 22} 23input{ 24 display: block; 25 max-width: 300px; 26 margin: 0 auto; 27} 28input:hover{ 29 transform: rotate(10deg); 30} 31 32#wrap{ 33 display: none; 34} 35table{ 36 background-color: #FFFFFF; 37 border: 5px solid #FF0000; 38 color: #000000; 39 margin: 50px auto; 40 padding: 3px; 41 width: 350px; 42} 43th{ 44 border: 2px solid #FF0000; 45 color: #FF0000; 46 font-size: 30px; 47} 48td + td{ 49 border-left: 1px dashed #FF0000; 50} 51td{ 52 text-align: center; 53 padding-top: 10px; 54 vertical-align: top; 55} 56td span { 57 -ms-writing-mode: tb-rl; 58 writing-mode: vertical-rl; 59 margin: 0 auto; 60 white-space: nowrap; 61 width: 1em; /* firefox対策 */ 62 line-height: 1em; /* firefox対策 */ 63 text-orientation: upright; 64} 65.title td{ 66 color: #FF0000; 67} 68.sns{ 69 margin: 60px auto 0; 70 width: 75px; 71} 72footer{ 73 margin-top: 30px; 74 text-align: center; 75} 76

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

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

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

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

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

kei344

2017/12/27 02:56

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。
saruasru

2017/12/27 03:01

解決済みにしました。ありがとうございます。
guest

回答3

0

fadeIn()は、引数にmsを入れます。


$('result').fadeIn(300);

うごくやつ

html

1<script 2 src="https://code.jquery.com/jquery-3.2.1.min.js" 3 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 4 crossorigin="anonymous"></script> 5 6<div id="id1">たたり</div> 7<div id="id2">あたり</div> 8<div id="id3">おおあたり</div> 9 10<hr> 11 12<div id="result" style="display: none;"></div> 13 14<button id="btn">おみくじる</button> 15 16<script> 17 //おみくじの結果をランダムで表示 18 function getOmikuji () { 19 var omikuji = ["id1","id2","id3"]; 20 var index = Math.floor(Math.random() * omikuji.length); // ランダムで0-2の値を取得 21 var id = omikuji[index]; // ランダムで取得した値に対応するidを取得 22 var el = document.getElementById(id); // idに対する要素を取得 23 var result = el.outerHTML; // div内のtextを取得 24 25 console.log(result); 26 document.getElementById('result').innerHTML = result; // 結果を表示 27 } 28 29 //結果の表示・非表示 30 $(function(){ 31 32 $('#btn').click(function(){ 33 34 getOmikuji(); 35 36 //フェードインで表示 37 $('#result').fadeIn(1000); 38 39 //ボタンを非表示にする 40 $(this).hide(); 41 }); 42 43 }); 44 45</script> 46

投稿2017/12/18 03:40

編集2017/12/18 08:54
nnahito

総合スコア2004

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

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

saruasru

2017/12/18 03:43

ご回答ありがとうございます。 msを入れましたが、fadeIn自体は効きませんでしたm(_ _)m
nnahito

2017/12/18 08:55

とりあえずこんな感じですか?
saruasru

2017/12/19 04:41

getOmikuji();を追加ですかね?しましたが動作しません><
nnahito

2017/12/19 10:15

そこだけではないですが…… 一つ一つ情報を整理しましょう。 (1)おみくじの結果をフェードインで表示させたいのですが、それが上手くできず止まってしまっています * この部分のHTMLのdisplayまたは、visibilityはどうなっていますか? * display: noneまたはvisibility: hiddenの場合は、 *document.getElementById(id);で取得した要素自体が非表示になっている可能性があります。 (2)開発者ツールのWebConsoleでエラーは出ていますか? * 私はFirefoxユーザなので、Ctrl+Shift+K(Macなら⌘+⌥+K)で開きます。 * Chromeはわからないですが、右クリック→検証→Consoleで見れます。 * 赤字のエラーは出ていますか? (3)要素の検証で、どのような挙動をしているかの確認 * (2)と同様、開発者ツールの「インスペクター」で、「占う」ボタンを押下した時の * 該当箇所の動きはどうなっていますか?
saruasru

2017/12/22 06:19

返信遅れてしまい申し訳ございません。 (1)おみくじの結果はdisplay:noneで非表示にしていて、それをクリックのタイミングで表示に切り替えています。 (2)クロームで確認しているのですが、このようなエラーがありました。htmlerrorchecker.js:1 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. (3)ボタンを押した時、<span id="result"></span>に中身が入ります。 <span id="result"><table>~~</span> 以上になります。よろしくお願い致します。m(_ _)m
nnahito

2017/12/22 09:46

> おみくじの結果はdisplay:noneで非表示にしていて この時点で私の記載した「display: noneまたはvisibility: hiddenの場合は、document.getElementById(id);で取得した要素自体が非表示になっている」という部分が当てはまりそうですね。 一度display: noneを取り外して実行してみてください。 > クロームで確認しているのですが、このようなエラーがありました こいつに関しては、以下の記事が参考になりそうです。 https://teratail.com/questions/25592 非同期通信に失敗しているのでしょうか? > ボタンを押した時、<span id="result"></span>に中身が入ります。 本当に入っていましたか? 「入るように設計した」のと「実際に入っている」では今後の回答が変わってきます。 以上、ご確認をお願い致します
saruasru

2017/12/27 02:01

返信遅れてしまいすみません。。display: noneを取り外してもおみくじの結果が最初から出てしまうこと以外の変化がおきませんでしたm(_ _)m <span id="result"></span>には実際に結果が入ります。
saruasru

2017/12/27 02:05

ご丁寧に色々と考えていただき本当にありがとうございます。ローンチしなくてはいけなくなったので、フェードインを諦めることになりましたm(_ _)mご回答ありがとうございました。。
guest

0

セレクタにtypoがあります。

javascript

1$('#result').fadeIn();

投稿2017/12/18 03:42

Lhankor_Mhy

総合スコア35867

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

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

saruasru

2017/12/18 03:49

ご回答ありがとうございます。 typoを追加しましたがフェードイン自体はできませんでしたm(_ _)m
Lhankor_Mhy

2017/12/18 03:52

「typoを追加」という言い回しが気になります。 追加後のコードをご提示いただけますか?
Lhankor_Mhy

2017/12/18 03:53

ちなみにtypoとは「打ち間違い」という意味です。
saruasru

2017/12/18 05:10

すみません解釈を間違えていました。 追加後は $('#result').fadeIn(); と記入しております。
Lhankor_Mhy

2017/12/18 05:18

$('result').fadeIn(); の後ろに全角スペースがありますが、これは実際にはないですよね? もしこのままだとすると、エラーになるはずです。
saruasru

2017/12/19 03:55

スペースは入れてないです><
Lhankor_Mhy

2017/12/19 04:39

うーん、では開発者ツールにエラーメッセージは出てないですか?
Lhankor_Mhy

2017/12/19 04:40

ちなみに、「ボタンを非表示にする」の部分は正常に動作していますか?
saruasru

2017/12/19 04:41

はい。そこは動作するんですよ・・・
Lhankor_Mhy

2017/12/19 04:43

getOmikujiも動作しますか?
saruasru

2017/12/19 05:33

//結果の表示・非表示のgetOmikujiでしょうか?そこは追記しても特に何も起きませんでした。他の箇所に記述があるgetOmikujiは動作しています。
Lhankor_Mhy

2017/12/19 07:53

あと考えられるのはCSSの影響ですかね。ご提示いただくことはできますか?
saruasru

2017/12/22 06:14

返信遅れてしまいすみませんm(_ _)m、今cssをあげました。よろしくお願い致します。
Lhankor_Mhy

2017/12/22 07:03

ありがとうございます。#resultにスタイルがついていないので、この状態だとfadeIn()するまでもなく表示されているような? HTMLのインラインでCSS書いたりしてませんでしょうか?
saruasru

2017/12/27 01:59

遅れてしまい申し訳ございません。#resultは中身が空になっていて、結果のボタンを押して初めて中身が出てくるような仕様になっておりますm(_ _)m
saruasru

2017/12/27 02:05

ご丁寧に色々と考えていただき本当にありがとうございます。ローンチしなくてはいけなくなったので、フェードインを諦めることになりましたm(_ _)mご回答ありがとうございました。。
guest

0

自己解決

ローンチに間に合わないので、フェードイン諦めましたm(_ _)m
ご回答ありがとうございました。

投稿2017/12/27 03:00

saruasru

総合スコア13

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問