BetterToggle

JavaScript

要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」

面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」です。CSS3を利用して動作しているそうですね。機能や使い方もとてもシンプルです。

[ads_center]

使い方

jQueryとプラグインを読み込みます。clickというid名の要素がクリックされたらexampleというid名の要素が動作します。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.betterToggle.js"></script>
<script type="text/javascript">
$(function() {
	$("#click").click(function() {
        $("#example").betterToggle();
    });
});
</script>

HTMlです。

<button id="click">Toggle</button>
<p id="example" class="sample">sanple</p>

CSSのサンプルです。

.sample {
    width: 100px;
    height: 100px;
    background: red;
}

ボタンをクリックする度に、サンプルが縮小しながら非表示になったり拡大しながら表示されたりするようになります。面白いですね。

ここではp要素にしましたが、公式サイトではimg要素が使われています。他にも要素をinsertしたりもできるのでダウンロードや詳しい詳細については公式サイトをご確認ください。

関連記事

  1. JavaScript

    とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

    個人的に使いやすそうだったので備忘録です。DropKickというjQu…

  2. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  3. Data Img

    JavaScript

    ブラウザ幅に応じて画像を切り替えれるレスポンシブ対応のjQueryプラグイン「Data Img」

    Data Imgはブラウザ幅に応じて最適なサイズの画像を切り替えて表示…

  4. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  5. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  6. NO IMAGE

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. タリーズ ハウスブレンド
  2. BAG-TW1BKシリーズ
  3. 落ち葉と雪

アーカイブ

PAGE TOP