Fading von einer Klasse zur anderen mit einem Spritesheet mit Javascript/jQuery

Question

Ich habe ein Spritesheet mit vielen Bildern, die ich je nach den Gefühlen des Charakters wechseln. Ich habe alle seine Ausdrücke in Klassen eingeteilt.

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

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

Je nach den Umständen, entferne ich die Klasse aus dem div es dann geben Sie die neue Klasse, wie folgt aus:

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

Ich möchte den Übergang zwischen diesen glatter machen, indem Verblassen von einem Bild zum anderen. Ich habe gesucht und die meisten Beispiele, die ich gefunden habe, entweder a: hover css, aber ich möchte in der Lage sein, es über Javascript-Code und nicht über einen mouseover zu steuern. Es gab auch eine Lösung, die ich fand, dass transition: background 0.5s ease-in-out; verwendet wurde, aber diese Lösung bewegt nur das Spritesheet von dem ersten Abschnitt zu dem anderen. Andere haben vorgeschlagen, $('#div1').removeClass(currExpression).addClass(expression).fadeIn(500);, aber es macht keinen Unterschied.

ich auch beschlossen, die transitioning mit einem guten alten

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

Aber es ist nicht ganz zu tun ist zu tun, was ich will, wie es weg und blendet verblasst zu einem anderen direkt in statt von einer Klasse von Fading.

Was ich wirklich gerne tun würde, ist, als ob der erste Abschnitt meines Sprite Sheet in den zweiten Abschnitt des Sprite Sheet verblassen würde, als wären es zwei separate Bilder, ein bisschen so: http://tinypic.com/view.php?pic=jv6wet&s=9#.VwCUO6QrK5g. Gibt es eine Möglichkeit, dies in jQuery, CSS oder Javascript zu tun?

Answer 1

Dies kann mit CSS getan werden ... Sie haben vergessen, die Übergangszeitfunktion Eigenschaft hinzuzufügen, und das könnte sein, was vor sich geht. Versuchen Sie

transition: background 0.5s ease;