使用Javascript / jQuery使用spritesheet从一个类淡化到另一个类

时间:2016-04-03 02:46:49

标签: javascript jquery css3

我有一张带有大量图像的精灵表,我根据角色的感受切换到这些图像。我已将他的所有表达式都映射到了类中。

transition: background 0.5s ease-in-out;

根据具体情况,我从div中删除该类,然后给它新的类,例如:

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

我希望通过从一个图像淡化到另一个图像来实现这些平滑过渡之间的过渡。我已经搜索了周围,我发现的大多数例子都提到了:hover css,但我希望能够通过Javascript代码而不是鼠标悬停来控制它。我发现还有一个解决方案是使用$('#div1').fadeOut(); $('#div1').removeClass(); $('#div1').addClass(expression); $('#div1').fadeIn(); ,但此解决方案只将spritesheet从第一部分移动到另一部分。其他人建议{{1}},但它并没有什么不同。

我还决定用旧的

进行过渡
{{1}}

但它并没有完全符合我的要求,因为它逐渐消失并消失,而不是直接从一个类消失到另一个类。

我真正喜欢的是做我的精灵表的第一部分会淡入精灵表的第二部分,好像它们是两个单独的图像,有点像这样:{{3} }。 有没有办法在jQuery,CSS或Javascript中执行此操作?

1 个答案:

答案 0 :(得分:0)

这可以用css完成...你忘了添加转换计时功能属性,这可能是正在发生的事情。尝试

transition: background 0.5s ease;