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

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

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2006閲覧

jQueryのanimatiionを一回だけ実行して、戻るボタン押下時は実行しない方法

natlpush

総合スコア32

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/06/19 02:07

編集2017/06/19 02:18

メールフォームにて、jQueryのanimateを使用しています。

確認ボタンを押すと確認ページに遷移するのですが、入力違いなどで遷移先ページからフォームへ戻ってくるとまたアニメーションが繰り返されます。

最初のフォーム画面でリロード時はアニメーションしたいのですが、戻るボタンで戻った時は何もしないような方法はありますか。

また、最初に読み込んだのか戻ってきたのかを判断する方法はありますか。
よろしくお願いいたします。

HTML

<dl id="entry-form"> <form action="test2.php" method="post" enctype="multipart/form-data"> <dt class="required">お名前</dt> <dd><input id="fromname" name="fromname" type="text" placeholder="お名前をご入力ください" /></dd> <dt class="required">ふりがな</dt> <dd><input name="name_kana" type="text" placeholder="ふりがなをご入力ください" /></dd> <dt class="required fade">メールアドレス</dt> <dd><input name="mailaddress" type="text" placeholder="" /></dd> <dt class="required">電話番号</dt> <dd><input name="phone" type="text" placeholder="半角英数ハイフン付き" /></dd> <dt class="">最寄り駅</dt> <dd><input name="station" type="text" placeholder="ご自宅最寄り駅" /></dd> <dt class="required">年齢</dt> <dd><input name="age" type="text" placeholder="年齢をご入力ください" /></dd> <dt class="required">コメント</dt> <dd><textarea name="content" cols="8" rows="8" placeholder=""></textarea></dd> <p class="table"> <input class="cell btn_blue" id="submit_btn" type="submit" value="確認画面へ" /> <input class="cell btn_blue" id="2" type="reset" value="リセット" /> </p> </form> </dl>

jQuery

$(function(){ $("input:text:even").css({left:999}); $("input:text:odd").css({left:-999}); var n=0; $.when( $("input:text").each(function(i) { $(this).delay(i*300).fadeIn().animate({left:0},'slow'); n++; }) ).done(function(){ $('#entry-form textarea').animate({top:0,left:0},1000); $('#entry-form p.table').fadeIn(1000+300); }); });

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/06/19 02:08

今実際に書かれているソースコードもご提示ください。
natlpush

2017/06/19 02:19

ソースコードを追記しました。よろしくお願いします。
guest

回答1

0

ベストアンサー

画面が切り替わっている(画面遷移・ファイル自体も別ファイルへ)場合は、今回の入力画面だけでは「戻ったか」「初回か」というのは判断できません。

幾つか実現可能そうな方法を提示しますのでご検討ください。

  • PHPで判断。 ※HTMLがPHPから出力されたHTMLである場合

「確認画面にいった」などの情報をセッションで持っておき「確認画面にいった」場合は、javascript部分を入れ込まない(※HTMLに直接埋め込んでいる場合)
入力と確認、送信が同じPHPファイルである場合はセッションじゃなくても作り方次第で可能

「確認画面にいった」などの情報をstorageで持っておき「確認画面にいった」場合は、javascript部分を実行しないように分岐させる

いずれにしても完了画面に行く際に「確認画面にいった」という情報は削除しとかないといけないですね。

投稿2017/06/19 02:31

m.ts10806

総合スコア80850

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

natlpush

2017/06/19 06:58

ありがとうございます。 jQuery自体ではわからないんですね。 PHPのセッションでやってみようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問