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

Photoshopのレイヤーオブジェクトを中央に配置Photoshopのレイヤーオブジェクトを中央に配置させるやり方前のページ

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

関連記事

  1. no-image

    JavaScript

    シンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」

    snakeMenuはシンプルなアニメーションによるドロップダウンメニュ…

  2. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  3. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  4. Responsive Parallax Drag-slider With Transparent Letters
  5. JQuery Portfolio
  6. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

コメント

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

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

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP