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

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

ただいまの
回答率

91.06%

  • JavaScript

    13294questions

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

fadeIn();が効きません

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 194

saruasru

score 3

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

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

<script>
    //おみくじの結果をランダムで表示
    function getOmikuji () {
        var omikuji = ["id1","id2","id3"];
        var index = Math.floor(Math.random() * omikuji.length);  // ランダムで0-2の値を取得
        var id = omikuji[index];   // ランダムで取得した値に対応するidを取得
        var el = document.getElementById(id);  // idに対する要素を取得
        var result = el.outerHTML; // div内のtextを取得

        document.getElementById('result').innerHTML = result; // 結果を表示
    }

    //結果の表示・非表示
    $(function(){

        $('#btn').click(function(){
            //フェードインで表示
            $('result').fadeIn(); //⇦ここが効きません
            //ボタンを非表示にする
            $(this).hide();
        });

    });


    //スマホを振るとおみくじ結果がでる
    $(document).ready(function() {
        $(this).gShake(function() {
            var clickMe = document.getElementById('btn');
            clickMe.click();
        });
    });
</script>
body{
    background-color: #4c4c4c;
    color: #FFFFFF;
}
main{
    margin: 0 auto;
    max-width: 700px;
}
h1{
    text-align: center;
    line-height: 1.5;
}
h1 img{
    width: 100%;
}
p{
    text-align: center;
}
.txt-1{
    font-size: 14px;
    line-height: 1.5;
}
input{
    display: block;
    max-width: 300px;
    margin: 0 auto;
}
input:hover{
    transform: rotate(10deg);
}

#wrap{
    display: none;
}
table{
    background-color: #FFFFFF;
    border: 5px solid #FF0000;
    color: #000000;
    margin: 50px auto;
    padding: 3px;
    width: 350px;
}
th{
    border: 2px solid #FF0000;
    color: #FF0000;
    font-size: 30px;
}
td + td{
    border-left: 1px dashed #FF0000;
}
td{
    text-align: center;
    padding-top: 10px;
    vertical-align: top;
}
td span {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin: 0 auto;
    white-space: nowrap;
    width: 1em; /* firefox対策 */
    line-height: 1em; /* firefox対策 */
    text-orientation: upright;
}
.title td{
    color: #FF0000;
}
.sns{
    margin: 60px auto 0;
    width: 75px;
}
footer{
    margin-top: 30px;
    text-align: center;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/12/27 11:56

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

    キャンセル

  • saruasru

    2017/12/27 12:01

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

    キャンセル

回答 3

+3

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


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

 うごくやつ

<script
              src="https://code.jquery.com/jquery-3.2.1.min.js"
              integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
              crossorigin="anonymous"></script>

<div id="id1">たたり</div>
<div id="id2">あたり</div>
<div id="id3">おおあたり</div>

<hr>

<div id="result" style="display: none;"></div>

<button id="btn">おみくじる</button>

<script>
    //おみくじの結果をランダムで表示
    function getOmikuji () {
        var omikuji = ["id1","id2","id3"];
        var index = Math.floor(Math.random() * omikuji.length);  // ランダムで0-2の値を取得
        var id = omikuji[index];   // ランダムで取得した値に対応するidを取得
        var el = document.getElementById(id);  // idに対する要素を取得
        var result = el.outerHTML; // div内のtextを取得

        console.log(result);
        document.getElementById('result').innerHTML = result; // 結果を表示
    }

    //結果の表示・非表示
    $(function(){

        $('#btn').click(function(){

            getOmikuji();

            //フェードインで表示
            $('#result').fadeIn(1000);

            //ボタンを非表示にする
            $(this).hide();
        });

    });

</script>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/18 12:43

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

    キャンセル

  • 2017/12/18 12:43

    それは省略可能です。デフォルトは400ms
    http://api.jquery.com/fadeIn/

    キャンセル

  • 2017/12/18 17:55

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

    キャンセル

  • 2017/12/19 13:41

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

    キャンセル

  • 2017/12/19 19:15

    そこだけではないですが……
    一つ一つ情報を整理しましょう。

    (1)おみくじの結果をフェードインで表示させたいのですが、それが上手くできず止まってしまっています
    * この部分のHTMLのdisplayまたは、visibilityはどうなっていますか?
    * display: noneまたはvisibility: hiddenの場合は、
    *document.getElementById(id);で取得した要素自体が非表示になっている可能性があります。

    (2)開発者ツールのWebConsoleでエラーは出ていますか?
    * 私はFirefoxユーザなので、Ctrl+Shift+K(Macなら⌘+⌥+K)で開きます。
    * Chromeはわからないですが、右クリック→検証→Consoleで見れます。
    * 赤字のエラーは出ていますか?

    (3)要素の検証で、どのような挙動をしているかの確認
    * (2)と同様、開発者ツールの「インスペクター」で、「占う」ボタンを押下した時の
    * 該当箇所の動きはどうなっていますか?

    キャンセル

  • 2017/12/22 15: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

    キャンセル

  • 2017/12/22 18:46

    > おみくじの結果はdisplay:noneで非表示にしていて

    この時点で私の記載した「display: noneまたはvisibility: hiddenの場合は、document.getElementById(id);で取得した要素自体が非表示になっている」という部分が当てはまりそうですね。
    一度display: noneを取り外して実行してみてください。


    > クロームで確認しているのですが、このようなエラーがありました

    こいつに関しては、以下の記事が参考になりそうです。
    https://teratail.com/questions/25592
    非同期通信に失敗しているのでしょうか?


    > ボタンを押した時、<span id="result"></span>に中身が入ります。

    本当に入っていましたか?
    「入るように設計した」のと「実際に入っている」では今後の回答が変わってきます。

    以上、ご確認をお願い致します

    キャンセル

  • 2017/12/27 11:01

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

    キャンセル

  • 2017/12/27 11:05

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

    キャンセル

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/18 12:49

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

    キャンセル

  • 2017/12/18 12:52

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

    キャンセル

  • 2017/12/18 12:53

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

    キャンセル

  • 2017/12/18 14:10

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

    キャンセル

  • 2017/12/18 14:18

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

    キャンセル

  • 2017/12/19 12:55

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

    キャンセル

  • 2017/12/19 13:39

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

    キャンセル

  • 2017/12/19 13:40

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

    キャンセル

  • 2017/12/19 13:41

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

    キャンセル

  • 2017/12/19 13:43

    getOmikujiも動作しますか?

    キャンセル

  • 2017/12/19 14:33

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

    キャンセル

  • 2017/12/19 16:53

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

    キャンセル

  • 2017/12/22 15:14

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

    キャンセル

  • 2017/12/22 16:03

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

    キャンセル

  • 2017/12/27 10:59

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

    キャンセル

  • 2017/12/27 11:05

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

    キャンセル

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 91.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    13294questions

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