使用Javascript / jQuery使用Spritesheet从一类过渡到另一类

Question

我有一个带有大量图像的Spritesheet，我会根据角色的感觉切换到这些图像。 我已经将他所有的表达式都映射到了类中。

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

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

根据具体情况，我从div中删除该类，然后为其提供新的类，例如：

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

我想通过从一个图像过渡到另一个图像来使这些过渡更加平滑。 我到处搜索，发现的大多数示例都提到了：hover css，但是我希望能够通过Javascript代码而不是鼠标悬停来控制它。 我发现还有一个解决方案是使用transition: background 0.5s ease-in-out; ，但此解决方案仅将Spritesheet从第一部分移到另一部分。 其他人建议$('#div1').removeClass(currExpression).addClass(expression).fadeIn(500); ，但没有影响。

我也决定用一个好老

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

但这并不能完全满足我的要求，因为它会逐渐消失并逐渐消失，而不是直接从一类过渡到另一类。

我真正想做的是，将精灵表的第一部分淡入精灵表的第二部分，就像它们是两个单独的图像一样，有点像这样： http : //tinypic.com/view .php？pic = jv6wet＆s = 9＃.VwCUO6QrK5g 。 有没有可能在jQuery，CSS或Javascript中执行此操作？

Answer 1

可以使用CSS完成此操作...您忘记添加过渡计时功能属性，可能就是这种情况。 尝试

transition: background 0.5s ease;