Javascript/jQueryを使用して、あるクラスから別のクラスへフェードします。

Question

私はキャラクターの気持ちに応じて切り替えるイメージがたくさんあるスプライトシートを持っています。私はすべての表現をクラスにマッピングしました。

.normal{ 
    background: url(background.png) 0 0; 
} 

.happy{ 
    background: url(background.png) 100% 0; 
} 

は、状況に応じて、私はこのような、それに新しいクラスを与えるDIVからクラスを削除します。

$('#div1').removeClass(); 
$('#div1').addClass(happy); 

私は退色することにより、これらの円滑な間の遷移をしたいのですがある画像から他の画像へ私は周りを検索して、私が見つけたほとんどの例のいずれか：ホバリングCSSが、私はJavascriptコードを介してマウスオーバーではなく、それを制御できるようにしたい。私はtransition: background 0.5s ease-in-out;を使用することがわかった1つの解決策もありましたが、このソリューションではスプライトシートを最初のセクションから他のセクションに移動するだけです。他の人は$('#div1').removeClass(currExpression).addClass(expression).fadeIn(500);を提案しましたが、違いはありません。

私も古き良き

$('#div1').fadeOut(); 
$('#div1').removeClass(); 
$('#div1').addClass(expression); 
$('#div1').fadeIn(); 

で移行を行うことを決めた。しかし、それは消え、代わりに直接別のクラスからフェージングのフェードインとしてそれはかなり、私がやりたいことはありません。

スプライトシートの最初のセクションがスプライトシートの2番目のセクションにフェードするかのように、2つの別々のイメージ（http://tinypic.com/view.php?pic=jv6wet&s=9#.VwCUO6QrK5gのように）をあたかもしているかのようにします。 jQuery、CSS、Javascriptでこれを行う方法はありますか？

Answer 1

これはcssを使って行うことができます。遷移タイミング関数のプロパティを追加するのを忘れていました。それは起こっている可能性があります。お試しください

transition: background 0.5s ease;