メールフォームにて、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); }); });
回答1件
あなたの回答
tips
プレビュー