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