1

特にエラーメッセージとありがとうメッセージのために、いくつかのjqueryを使用してphpフォームに取り組んでいます。jquery の部分はここで見ることができます: http://jsbin.com/ohuya3
フォーム
の実際の例はここで入手できます:
http://cozyphant-living.com/php/formular4.htm
" ボタンをクリックして、メッセージ パネルを表示します。
ありがとうまたはエラーパネルをスライドさせてテキストをフェードインさせたいと思っていました.スクリプトは私のコードを受け入れています（まだ動作しているため）が、実際にはテキストが実際にフェードインすることはわかりません.テキストがフェードインするスライド パネルのサンプル。したがって、私が行ったのは間違った種類のコーディングのようです。
どんな助けでも大歓迎です。

4

2 に答える 2

1

問題は、#formResponseコンテナが最初は隠されていないことです。応答テキストが挿入されるとすぐに、フェードインするのではなく、直接表示されます。display: none;非表示にすることを宣言する必要があります。

<div class="contact-form-text" id="formResponse" style="display: none;"></div>

次に、AJAXコールバック関数がテキストを挿入し、フェードインします。

更新：スライドとフェードインの両方が必要な場合は、追加の応答コンテナーを使用する必要があります。スライドアウトすると、既に表示されており、100％の可視性からフェードインできないためです。したがって、必要なものは次のようになります。

<div id="formResponse_container" style="display:none;"> <!-- extra wrapper -->
    <div id="formResponse" class="contact-form-text" style="display:none;"></div>
</div>

次に、jQueryスクリプトで

$("#formResponse").hide().html(data).show('slow'); //hide before slide!

あなたが持っているだろう

$("#formResponse_container").slideDown("slow", function() {
    $("#formResponse").html(data).fadeIn("slow");
});

つまり、最初に外側のコンテナを下にスライドし、アニメーションが完了すると、内側のコンテナでフェードインします。

実例

お役に立てれば。

于 2010-10-04T11:15:57.670 に答える
1

.show()あなたの場合、必要な同時スライド + フェード効果の期間で使用します。

$("#formResponse").html(data).show('slow')

ここで効果をテストできます。

margin: 0 auto;具体的には、コードをオブジェクトから削除する必要があるため#formResponse、上記のアニメーション コードで問題が発生します。また、全体的に次のように、メンテナンスが少し簡単な方法でフォームをシリアル化することもできます。

$("#contact_form").submit(function() {
  var arr = $(this).serializeArray();         //serialize form, based on names
  arr.push({ name: 'senden', value: 'yes' }); //add the senden variable
  $.post('mail.php', arr, function(data) {    //pass that object as your data
    $("#formResponse").hide().html(data).show('slow'); //hide before slide!
  }, 'text');
  return false;
});
于 2010-10-04T10:53:52.897 に答える