IT

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

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

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

サンプル

まずはHTMLから。

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

ABOUT ME
アバター
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。記事執筆・ホームページ制作・メディア運営・コンサルティングのお仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。中小企業診断士とFP1級を目指してハードに勉強中。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA