jQueryゼロから / fadeTo (指定要素をフェードイン)

Lightboxとかの背景部分のアニメーションみたいな事が出来る fadeTo。
slideUp, slideDown と同様スピードに加え、透明度(opacity)を指定します。

1
2
3
4
<div id="targer" style="opacity: 0.0">
// 何か表示するもの
</div>
$('#target').fadeTo('slow', 0.8);

対象を最初隠しておくならopacity属性を0.0に設定しときます。

サンプル

2011.01.28 追記
fadeIn, fadeOut, fadeToggle(jQuery1.4.4以降)など似たような機能がありますが、opacity属性以外にdisplay属性も変わるので注意が必要です。ときどき忘れちゃいます…

HTML5 / Canvas Arrowキー入力

前回のをArrowキーで移動に変更する。
キーボードの矢印キーで移動した方がそれっぽいよね。

矢印ボタンを廃止してonClickをkeypressイベントに差し替える。
keypressイベントでkeyCodeを参照。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
switch(event.keyCode){
    case 38:
        // 上移動
        break;
    case 40:
        // 下移動
        break;
    case 37:
        // 左移動
        break;
    case 39:
        // 右移動
        break;
}

しかし、SafariやChromeなどのWebKitだと反応しない。
keypressではなくkeydownを使う必要があるらしい。
しかも、WebKit以外ではkeydownだと押しっぱなしが拾えないので分岐させることに。
jQueryだとjQuery.browser.webkitを利用。
※1.4以降だとbrowserは非推奨みたい…

1
2
3
4
5
var trigger = 'keypress';
if ($.browser.webkit) {
    trigger = 'keydown';
}
$(document).bind(trigger, ...)

サンプル

2011.01.07 追記
ブラウザ判定に $.browser ではなく $.support 使うには下記も参照のこと。
HTML5 / Canvas キーボード入力