Ajaxのアニメーション的な動きをするFormを探しています

2010/10/13 11:56

このQ&Aのポイント

Ajaxのアニメーション的な動きをするFormを探しています。
http://www.synthview.com/en/のCONTACTをクリックするとフォームが上から出現します。HTMLを参考に制作しましたけど、うまく行きませんでした。
http://www.designshack.co.uk/tutorialexamples/jquerycontactform/こんなのが見つかりましたけど、残念ながらExplorerではうまく動作できませんでした。他に似たようなAjaxのFormを探しています。ありましたら教えてください。

nkmyr
お礼率67% (403/600)

AJAX
回答数1
ありがとう数5

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2010/10/13 21:32 回答No.1

どちらもjquery（javascript）を利用しているみたいですね。どのようにしたいのか不明ですが、例えば最初のほうならformを画面上部に配置しておいて、全体をスクロールダウンしてくればよいのでは？後者の例ではform部分だけをスクロールダウンすればOK。 Ajaxは表示内容を外部から取得したり、ユーザの入力値をサーバに送信したりする際に利用するものなので、直接は関係ないかも。ごく簡易な似たものの例（jqueryは使用していません） CONTACTをクリックで表示/非表示がスクロールでトグルします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> body { position:relative; top:0px; } #navi { height:30px; } #navi ul { list-style:none; padding:0; margin:0; } #navi li { display:block; width:9em; padding:10px; float:left; border:1px solid #ddd; text-align:center; cursor:pointer; } #form form { height:100px; padding:10px; line-height:1.8em; position:absolute; top:-200px; } #form ul { list-style:none; } #form li span { display:inline-block; width:9em; } #form li input { width:10em; } </style> <script type="text/javascript">  </script> </head> <body> <div> <ul id="navi"> <li>A</li> <li>B</li> <li>C</li> <li onclick="sample()">CONTACT</li> </ul> </div> <div id="form"> <form> <ul> <li style="font-weight:bold;">title of form</li> <li><span>title for box 1</span> <input type="text" name="i1"></li> <li><span>title for box 2</span> <input type="text" name="i1"></li> <li><span>title for box 3</span> <input type="text" name="i1"></li> </ul> </form> </div> </body> </html>

質問者