jQueryで画面遷移させる方法

jQueryで画面遷移させる方法 javascript
この記事は約4分で読めます。
スポンサーリンク

jqueryで遷移する方法をご紹介します。
画面遷移する場合、javascriptでは「window.location.href」と記述し
jQueryだと「location.href」で遷移することができます。
今回はすべてjQueryで書いていきます。
例えば…リロードする場合。

すぐにリロードする

リロードする場合は、そのままな感じですが

【HTML】
  <button>リロード</button>
【jQuery】
  $("button").on("click", function() {
    location.reload();
  });
【Demo】

すぐに別ページへ遷移

別ページへ遷移する場合は、とび先のURLを「location.href」に付ければ遷移してくれます。

【HTML】
  <button>他のページへ</button>
【jQuery】
  $("button").on("click", function() {
    location.href= "ここにとび先のURLを書いてください";
  });
【Demo】

※下記のボタンを押すとWikipediaにジャンプします。

数秒待ってからリロード・ページ遷移

ボタンを押してから、数秒待ってリロード・ページ遷移します。
リロード・ページ遷移共にDemoは1秒待ってからの画面が切り替わります。
この時の1秒って結構長く感じます。
私事ですが、最近1年が過ぎるのが超早いです。
今やっていることが小学生の頃の夢と、かけ離れちゃったなぁと思います。
だって小学生の頃の夢が宇宙飛行士とか、夢見すぎてました。
老いの心配とともに、最近は妻と老後の心配もして…失礼しました。
話を戻します。
下に実際のコードとデモがありますので、「setTime」の時間を調節して利用してください。

【HTML】
 <button>リロード</button>
 <button>他のページへ</button>
【jQuery】
//リロード
$("button").on("click", function() {
  setTimeout(function() {
    location.reload();
  }, 1000);
});

//ページ遷移
$("button").on("click", function() {
  setTimeout(function() {
    location.href= "ここにとび先のURLを書いてください";
  }, 1000);
});
【Demo】

※「他のページへ」ボタンを押すと1秒待ってWikipediaにジャンプします。


アニメーションしてからリロード・ページ遷移

ボタンを押すとアニメーションしてから遷移します。
アニメーションの値(jQueryのサンプルでは「opacity: 0」)を実行した後、
続けてfunctionし画面を遷移させます。

【HTML】
 <button>リロード</button>
 <button>他のページへ</button>
【jQuery】
//リロード
$("button").on("click", function() {
  $("アニメーションするクラスやID").animate({opacity: 0}, 1000, function() {
    location.reload();
  });
});

//ページ遷移
$("button").on("click", function() {
  $("アニメーションするクラスやID").animate({opacity: 0}, 1000, function() {
    location.href= "ここにとび先のURLを書いてください";
  });
});
【Demo】

※「他のページへ」ボタンを押すとアニメーションした後Wikipediaにジャンプします。


以上で、jQueryで画面遷移させる方法を終わります!

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました