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

解決済

質問者：nkmyr
質問日時：2010/10/13 11:56
回答数：1件

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2010/10/13 21:32

どちらも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>