jQueryでCSSの背景位置を使用してCSSスプライト画像をフェードする方法は？

Question

CSSスプライト画像を適切な効果でフェードする方法を知る必要があります。完全不透明効果にゼロ不透明のようにしたい。

あり、私の例：

http://jsfiddle.net/CppV6/

これらのボタンをクリックして、その効果は良く見ていません。私は助けが必要でした...

ありがとう！

Answer 1

あなたの主な問題は、あなたが50％の不透明度にまでフェードアウトしていたと思いますが、これを0％の不透明度に変更しました。

さらに、他の2つのツイークを追加しました。最も重要なのは、バックグラウンドポジションが変更されたときにスプライトをフェードバックする 'フェードイン'エフェクトです。これは最初のフェードが完了した後にのみ呼び出され、あなたが探していると信じている効果を与えます。

さらに、グローバル変数に$（ "＃スプライト"）セレクタを割り当てて、ブラウザを保存してjQueryをより効率的にすることができます。

idとクラスの名前を小文字で指定するのが一般的ですが、タイトルケースの名前付けに気付かず、何かが動作しない理由を理解するのは簡単です。このケースでは、小文字はコーディング標準として安全です。

$(function(){ 
    var $sprite = $('#sprite'); 
    $("button#Rainbow").click(function(){ 
    $sprite.fadeTo(200, 0, function() { 
     $sprite.css('background-position','0 0'); 
    }); 
    $sprite.fadeTo(200, 1); 
    }); 

    $("button#Esmerald").click(function(){ 
    $sprite.fadeTo(200, 0, function() { 
     $sprite.css('background-position','-152px 0'); 
    }); 
    $sprite.fadeTo(200, 1); 
    }); 

    $("button#Ruby").click(function(){ 
    $sprite.fadeTo(200, 0, function() { 
     $sprite.css('background-position','-303px 0'); 
    }); 
    $sprite.fadeTo(200, 1); 
    }); 
});