画面の中心から横にシュイーンって伸びて、次に縦にシュイーンとボックス要素を広げるjQueryのコードを紹介します。プラグインなどは特に必要ありません。
しかし、jQueryのanimateメソッドを使っているので、easingプラグインを入れたらいろいろと面白いことができるのではないでしょうか。
<p class="button">ここをクリック</p>
<div class="sample">
<p>ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
</div>p要素でボタンを作りました。ここはどんな要素でもクリック対象になればなんでもいいです。div.sampleが広げたいボックス要素になります。
次にCSSを紹介。
p.button {
border:2px solid #cccccc;
padding:4px;
background-color:#999;
width:120px;
color:#ffffff;
}
.sample {
position:relative;
right:250px;
top:250px;
padding:20px;
display:none;
background-color:red;
color:#ffffff;
}ポイントはdiv.sampleのposition:relative;を設定するとこです。これはのちのjQueryでtopとleftの2つのプロパティを設定するために記述します。
最後にjQueryの部分を紹介。
// ボタンクリック
jQuery("p.button").click(function() {
jQuery(".sample").css({
width:"0px",
height:"0px",
top:"250px",
left:"250px",
display:"none"
});
jQuery(".sample").show()
.stop(true).animate({
width:"500px",
left:"0px",
},500)
.animate({
height: "500px",
top:"0px",
},500)
return false;
});
});ボタンをクリックしたときの処理です。
最初にcssメソッドでいろいろなプロパティを初期化します。ここはいろいろなやり方があると思うので各自で好きな方法を使ってください。ポイントはtop:”250px”とleft:”250px”です。この250pxという数値は拡大したあとのボックス要素の高さと幅の半分の数値を入力します。今回は高さと幅がそれぞれ500pxのボックスを表示させたいので、topとleftにはその半分の250pxを設定します。
そのあとでanimateメソッドをチェーンして使っています。最初のanimateで横幅を0pxから500pxに広げます。そんでleftプロパティを250pxから0pxに変更させます。この書き方によって、ボックス要素を中心から横に広げるようなアニメーションができます。
次のanimateメソッドで高さを0pxから500px広げます。それと同時にtopを250pxから0pxに変更させます。この書き方でボックス要素の高さを広げつつ全体を上の方へ移動させることができます。
横に広げるアニメーションと縦に広げるアニメーションを連続で使っているだけですね。jQueryには標準でfadeInとかslideUpとかボックス要素を表示させる方法がありますが、ちょっと変わった表示方法の一つとして活用していただけたらと思います。
