jQueryゼロから / hover (オンマウスでアニメーション)

mouseover / mouseout でもできるけど hover ( mouseenter / mouseleave) の方が便利なので。
例えば、ある要素にマウスが乗っかったらアニメーションしたい時に、その要素の上にボタンとかアイコンとかがあると、mouseover / mouseout イベントが発生して思うように動作しなかったりするので、その時は hover 使いましょ、と。
まあ、基本なんだろうけど細かい動作の違いを知っておくと助かる場面も。
※知らずにやって驚いただけなんだが…

1
2
3
4
5
$('#target').hover(function(event){
    // mouseover時の処理
}, function(event){
    // mouseout時の処理
});

サンプル
2011.01.29追記
hoverと組み合わせてstop使うと便利なので、サンプルに補足しました。

javascriptでfeedを読み込む

よそのサイトのfeedをjavascriptだけで取り込もうとすると、制限あってできないのよね。テストサイトなんだけどxmlだけは本番の拝借したいとかでひかかったり。
んで、これまでphp経由してやりくりしてたんだが、それGoogleのAPIにあるのね。
Google Feed API – Google Code

まずは、APIキー取得します。
Sign-up for an API Key – Google Loader – Google Code

このAPIのキー使って読み込みます。
いつもは直リンしてるjQueryも今回はgoogle.loadで読み込んでみます。

1
2
3
4
5
6
<script type="text/javascript" src="https://www.google.com/jsapi?key=【取得したAPIキー】"></script>
<script type="text/javascript">
google.load('feeds', '1');
google.load('jquery', '1.4.4');
google.setOnLoadCallback(/* ここに読み込み後の処理を書く */);
</script>

使い方も簡単で、feedのURIと表示数を指定するだけ。

1
2
3
var feed = new google.feeds.Feed('feedのURIを指定する');
feed.setNumEntries(10); // 省略可、省略時は4件
feed.load(/* feed読み込み後の処理 */);

あ、でも、jQueryもgoogle.loadで読み込んでるから、google.setOnLoadCallback以降じゃないと使えんので注意かな。jQueryは直接読んだほうが書きやすいかも。

1
2
3
4
5
6
7
google.setOnLoadCallback(function(){
    jQuery(function($){
        var feed = new google.feeds.Feed(feedUri);
        feed.setNumEntries(10);
        feed.load(feedDraw);
    });
});

あとは取得したfeedによってHTMLに出力するなり加工するなりすれば大丈夫。上の例ならfeedDrawって関数で処理するイメージです。(jQueryのonLoad後にしてるのは、feedDrawで出力時にDOMが生成されていて欲しいから。jsの記述自体をHTMLの最後の方に持ってくる、というのも手ですが)
サンプル(GoogleNewsのfeedを読み込んで表示)

HTML5 / Canvas キーボード入力

前回のにアルファベット入力も追加。

下記参考に判定を入れてみる。
http://semooh.jp/jquery/api/events/keypress/fn/

1
2
3
4
5
6
7
8
9
10
11
12
13
var key;
if (event.which == 32
    || (event.which >= 65 && event.which <= 90)
    || (event.which >= 97 && event.which <= 122)) {
    key = String.fromCharCode(event.which).toUpperCase();
} else {
    key = event.keyCode;
}
switch(key){
    case 'Q':
        // 位置をリセット
        break;
}

これでQを押すと位置がリセットされます。
※Webkitだと大文字・小文字の区別がなかったので大文字で統一してます(toUpperCase)

あとは前回Webkit判定を非推奨の $.browser.webkit 使ってたので、下記を参考に $.support を使用。
http://w3g.jp/blog/tools/jquery_browser_sniffing
2012.10.17追記: ブラウザ判定なしで動くようにしました。ブラウザのバージョンアップで挙動が変わる方法は避けた方がイイかも。

さらに描画処理を setInterval から setTimeout を使うようにしました。
setInterval はもし前の処理が終わってなくても時間が来たら次の処理を実行しますが、setTimeout は前の処理が終了してから次の処理を実行するので、描画とか重そうな処理の時はこっちがいいかなと。

1
2
3
4
5
var fps = 1000 / 30; // 30FPS
setTimeout(function(){
    draw();
    setTimeout(arguments.callee, fps);
}, 0);

サンプル
MacのFirefox3.6.13 / Safari5.0.3 / Chrome8.0.552.231 / Opera11.0で確認