ユーザーがリンクをクリックするか、戻る/進むボタンをクリックしてページから移動する前にjQueryアニメーションを実行する方法はありますか？ページアンロード時にjQueryアニメーションを完了する
アンロードイベントに応答してアニメーションを実行するように見える場合は、ユーザーがページを離れる可能性のあるすべての条件を必ずカバーしてください。
ただし、アニメーションが完了する前に新しいページが読み込まれます。私は忙しく待つことができますが、それはあまりエレガントではありません。
また、アンカーのクリックを傍受することもできます。しかし、これは、バック/フォワードクリック、およびユーザがページから離れてナビゲートする他の条件を考慮していない。
はい、私は、このタイプの動作がユーザーを待たせるためにぶち壊されることを理解しています。しかし、私は賛否両論を上回ると考えている非常に特殊な状況でこれを実行しようとしています。
ユーザーがブラウザを使用してWebページを切り替える速度は、あなたのコントロール下ではなく、ページ内の機能のみです。あなたが提案されているように、新しいjQuery 1.3 live() event listenerで
は、あなたも、あなたがリスナーを宣言した後に作成されたすべての新しいアンカーのために、すべてのアンカーにリスナーを追加することができます。
$("a").live("click", function(){
var href = $(this).attr("href");
var animDuration = 1000;
// Do animation here; duration = animDuration.
setTimeout(function() {
window.location = href;
}, animDuration);
return false; // prevent user navigation away until animation's finished
});
素晴らしいアイデアをやってからあなたを防ぐために、あなたのチームの良いインタラクションデザイナーに...しかし、ユーザーを待たせるoffcoursは、おそらく良いアイデアではありません、あなたがしているかに依存しなければなりませんそれを使用して –
ええ、それは良いアイデアではないことを知っている...しかし、それは彼が求めているものです：アニメーションが完了する前にユーザーを待つままに:) – Seb
をあなただけにリスナーをサブスクライブする必要があるだろうドキュメントのonbeforeunloadイベント。ユーザーがページを離れるときに発生します。
onbeforeunloadは、コードがブール値を返すまでブロックします（ナビゲーションするにはtrue、ナビゲーションをブロックするにはfalse）。アニメーションコードが必要な場合は、最終的にブール値を上げる必要があります。
リンクを一切監視する必要はありません。
それを試してみて...私はあなたが何を記述するとは思わない少なくともFirefoxとSafariではonbeforeunloadの実際の動作です。戻り値は、ポップアップウィンドウにメッセージとして表示される値のようです。 – David
ドキュメントのonbeforeunloadイベントは、Davidが求めているものには適していません。
通常のイベント（およびajmが言っていること）とは対照的に、ブール値を返すことはこのイベントには影響しません。 falseを返すことでナビゲーションがブロックされたり、preventDefaultされたりすることはありません。
ブラウザではイベントハンドラが実行されるため、同期コードが実行されると実際にページが切り替わるのが遅くなることがありますが、非同期（jQueryアニメーションなど）はできません。機能が終了し、ページが強制終了され、次のページ要求が開始されます。
ブラウザが使用するこのイベントハンドラへの唯一の戻り値は、ユーザーに発言をするか放棄するかを尋ねる確認メッセージの一部として表示される文字列です。いずれかの選択を強制する方法はありません。
MDN documentation on window.onbeforeunloadも参照してください。 Firefox 4以降にバグがあります。
実装から実際の目標に戻る：ページ読み込みの間にアニメーションを表示する。おそらく、インターネット上の別のSOの質問とチュートリアルのトンを持っているいくつかの可能性：内部リンクがクリックされるたび
使用AJAXはのためのAJAX要求を開始し、ローダーのアイコンが表示されるようコンテンツ
をロードします他のページの内容その間に古いコンテンツが表示されている間は、スピナーを使って空白のページを表示するようにしてください。 ajax-callbackでは、コンテンツ要素（例：jQuery slideUp（））でファンシーアニメーションを行い、コンテンツを新しいコンテンツにスワップし、スピナーを非表示にして、次のファンシーアニメーション（例：jQuery slideDown（））を行います。 AJAXを持つすべての空想を行く
ハイジャックのアンカータグと手動リダイレクト
あり、この:-) –