中心からシュイーンシュイーンってボックスを広げるjQueryのコード

画面の中心から横にシュイーンって伸びて、次に縦にシュイーンとボックス要素を広げるjQueryのコードを紹介します。プラグインなどは特に必要ありません。
しかし、jQueryのanimateメソッドを使っているので、easingプラグインを入れたらいろいろと面白いことができるのではないでしょうか。

とりあえず、サンプルをご覧ください。

サンプル

まずはHTMLから。

p要素でボタンを作りました。ここはどんな要素でもクリック対象になればなんでもいいです。div.sampleが広げたいボックス要素になります。

次にCSSを紹介。

ポイントはdiv.sampleのposition:relative;を設定するとこです。これはのちのjQueryでtopとleftの2つのプロパティを設定するために記述します。

最後にjQueryの部分を紹介。

ボタンをクリックしたときの処理です。

最初に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とかボックス要素を表示させる方法がありますが、ちょっと変わった表示方法の一つとして活用していただけたらと思います。


この記事をかいた人

ドレッド Webクリエイター

WordPressの構築やjQueryによる動的サイトの実装が得意なWebクリエイターです。このブログではWeb制作で役に立ちそうな知識から、プライベートの出来事まで幅広いネタを取り扱っております。ご質問、ご要望はお問合せフォームからどうぞ! お仕事のご依頼はコレカラウェブへ! 2016年10月から放送大学に入学(選科履修生)

jQuery | Posted on 2014/01/11 06:17

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。