toggleを使ってメニューを演出
jQuery初心者が勉強している中でこれはいいな～。と、思った事柄を書き留めていこうと思う。
toggle(トグルというらしい。)
このメソッドは同じボタンをクリックすることで新しい命令を実行し、
最後までいくと一番はじめまで戻るという特性がある。例えるなら「開閉式のメニューなどを使用する時に最適」という事に。
「メニュー表示」を一回クリックするとメニューが開き、同じ要素を
クリックすると隠れる。といった感じだ。
ソースはこんな感じ。
$(function() {
$('#MenuTitle').toggle(
//一回目のクリックでメニュー領域が表示
function() {$('#Menus').animate({left:'+=120'},500)
//表示されているテキスト変更
$(this).text('メニュー非表示')},
//二回目のクリックでメニュー領域が隠れる
function() {$('#Menus').animate({left:'-=120'},500)
//表示されているテキスト変更
$(this).text('メニュー表示')}
);
//ここで命令が終わっているので、次は一番上の命令が実行される
});
▼サンプルはコチラ
サンプル
jQueryを使用することでクリエイティブの幅が広がる事を実感。
世の中に出回っているものすごいjQueryを使用するものいいが、こうやって
小さな知識でもあれば作業効率はきっと上がると思う。
