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で画面遷移させる方法を終わります！
コメント