特異なスライドアニメーションでフォームを表示したり隠したりするJavaScript

jQuery動作のイメージは以下

ここの右上のタブをクリックすると・・・


↓


ニョキっと現れます。

現れ方ははねるような感じ。サンプルで動作確認してみるとすぐわかります。
Contact Us Slide-Out Demo

ダウンロードは以下で。

jQueryの補足

CSSとjquery.easing.1.3.js、contact.jsを読み込もう。jqueryjs自体はGoogleから読み込む方法が記されています。

<link rel="stylesheet" href="contact.css"/>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="contact.js" type="text/javascript"></script>

CSSの高さ調整。
これは、JavaScriptがオフの人には一律フォームを表示させる為に使用される。
#contactArea { height: 225px; }

JavaScriptがオンの人は高さを0にして隠すようになっている。
$(document).ready(function(){

$("#contactArea").css('height', '0px');

});

表示したり、隠したりという動作を以下で行っている。
$(document).ready(function(){

$("#contactArea").css('height', '0px');

$("a.contact").toggle(
function () {
$("#contactArea").animate({height: "225px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
},
function () {
$("#contactArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
}
);

});

まぁ・・・ダウンロードしてじっくりコードを見るのが一番わかり易いかもしれませんね。

おまけ

コレと同じように動作するもので以下のもが有名。

サンプルデモ

詳細、ダウンロードは以下で。


尚、こちらもjQuery産となっています。


それでは、また。