「ボタンをクリックしたら〜秒後に遷移する」処理について

Question

前提・実現したいこと

javascript（jQuery）初学者です。

ボタンをクリックする　→ CSSでdisplay:noneにしていた要素をjavascriptでフェードイン表示し、遷移演出を見せる　→ 遷移する
という流れを実装したいです。

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

遷移の遅延を指定しているのに、すぐにページが遷移してしまう。

該当のソースコード

<div id="button">
<a href="result.html"></a>
</div>

<div class="toppage__hideme">
hogehoge
</div>

.toppage__hideme {
  width: 100vw;
  height: 100vh;
  background-color: #64468B;

  p {
    text-align: center;
    color: #ffffff;
  }
}

$(function() {

  // ボタンをクリックしたとき
  $('#button').click(function() {
 
    // ボタンを押して5秒後に結果ページへ遷移
    var TransitionDelay = function(){
        window.location.href = 'result.html';
    }
    setTimeout ( TransitionDelay, 5000 );

    // toppage__hidemeを1.5秒かけてフェードイン
    $('.toppage__hideme').fadeIn(1500);

  });
});

試したこと

htmlへの直接の書き込み　setTimeoutの書き換え（違う形で同じ意味になるようなもの）

Comments

[m.ts10806]

htmlもご提示ください。

[manamimu97]

申し訳ありません。

<div id="button">
<a href="result.html"></a>
</div>

<div class="toppage__hideme">
hogehoge
</div>

こちらで伝わりますでしょうか。

[m.ts10806]

質問は編集できるので適宜ご対応ください。

Answer 1

すぐにページが遷移してしまう。

Aタグがあるのですぐに遷移してしまいます。

Aタグをやめてもいいですが、下記のようにe.preventDefault();を使ってもいいと思います↓
https://jsfiddle.net/akv8x5qo/

Comments

[manamimu97]

ありがとうございます！解決できました。

Answer 2

aタグのリンク遷移が止められていないため、その後の処理に関わらず遷移しているのだと思います。

Event.preventDefault()で止めるか、
どうせlocationで遷移させてるならaタグのhref属性自体なくすか、
そもそもaタグやめるか(cilckイベントがとれる要素に変更)

などなど対応方法は色々と考えられます。
試してみてください。

あともしかしたら挙動には関係ないかもしれないですが、関数がイベントの中で定義されてるのはあまり可読性が良くないと私は思います。
あくまで定義なので外に出しても良いのではと思います。

Comments

[manamimu97]

ありがとうございます！Event.preventDefault()にて解決できました。
可読性についてのレビューもありがとうございます。修正します！

ベストアンサーにさせていただきます。助かりました。

[m.ts10806]

解決されたようで何よりです。
どの手法が適切かは要件次第なところはあるので、適宜検証してみてください

Answer 3

1.5秒かけてフェードインして、その3.5秒後に飛ぶ

Comments

[yambejp]

$('#button').on('click',function() {
$('.toppage__hideme').fadeIn(1500).delay(3500).queue(function(){
location.href = 'result.html';
$(this).hide().dequeue();
});
});