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. Before and After image script
  2. jQuery.Flexdatalist

    JavaScript

    テキスト入力候補を表示させれる「jQuery.Flexdatalist」

    jQuery.Flexdatalistはテキスト入力候補を表示させるこ…

  3. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

  4. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

  5. FancySelect

    JavaScript

    セレクトメニューをスタイリッシュに実装できるjQueryプラグイン「FancySelect」

    セレクトメニューをシンプルでスタイリッシュに実装することができるjQu…

コメント

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

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP