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したりもできるのでダウンロードや詳しい詳細については公式サイトをご確認ください。

ヘボン式ローマ字ヘボン式ローマ字を使う時の注意事項や便利な一覧表、入力変換サービスなど前のページ

ブラックとホワイトの色を使った29のWebサイト次のページブラックとホワイトの色を使ったWebサイト

最近の記事

  1. 縦置きスタンド
  2. スマトラ
  3. さくらドーナツ
PAGE TOP