Battlefield 3のロゴ効果

Question

Battlefield 3を持っている人には、ロゴを「くっきりさせる」効果を再現する方法を教えてください。私はイメージが3つの状態（マウスアウト、ホバー、マウスイン）を持っていることを知っていますが、どのようにしてそれをより鮮明にするかわかりません。

ロゴの効果は、BF3バトルログにログインし、ロゴ上にマウスを置くことで確認できます。

誰もが考えていますか？

Answer 1

これは、画像に添付されているイベントです：jQueryのライブラリがページにロードされている

var $headerLogoBF3=$("a.base-header-logo-bf3"); 
$headerLogoBF3.pageBind("mouseover", function() { 
    try { 
    $(this).stop().animate({backgroundPosition:"0px -136px"},80, function() { 
     $(this).stop().animate({backgroundPosition:"0px -68px"}); 
    }); 
    } catch(e){} 
}); 
$headerLogoBF3.pageBind("mouseout",function({ 
    try{ 
    $(this).stop().animate({backgroundPosition:"0px 0px"},"slow"); 
    } catch(e){} 
}); 

Answer 2

ここにはマジックはありません。マウスを動かすと画像が切り替わります。 DOMをチェックすると、背景位置が0 0から0〜-100px、最後に0〜-50pxにジャンプする様子が見えます。この画像では、http://battlelog-cdn.battlefield.com/public/base/bf3/header-logo2.png?v=590は最初に最後の "キラキラした "もの、次に中間のものへと変化します。

編集：

$('#logo').hover(function() { 
    var logo = $(this); 

    logo.css('background-position', '0 -100px'); 

    setTimeout(function() { 
     logo.css('background-position', '0 -50px'); 
    }, 5); 
}, function() { 
    $(this).css('background-position', '0 0'); 
}); 

EDIT2：あなたがしたい何、これを達成するには次のように言っているあなたも、setTimeoutメソッドを必要としない場合があります。

Answer 3

あなたは実際にあなた自身の質問に答え：

画像は、マウスアウトを持って置いて、マウスで画像。ホバーは恐らく小さなGIFで、マウスオーバーしてすぐにマウスの画像に置き換えられます。難しいことはなく、おそらく純粋なCSSで可能です！

幸運。

編集：私の答えは間違っていました。彼らはマウスの動きに応じてナビゲートする1​​つのイメージを使用しています。正しい説明はPowerbuoyの答えを参照してください。