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

Question

我有一个包含大量图像的 spritesheet，我可以根据 Angular 色的感受切换到这些图像。我已将他的所有表达式映射到类中。

.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();

但它并没有完全按照我的要求进行，因为它会逐渐消失并逐渐出现，而不是直接从一个类淡入另一个类。

我真正想要的是让 Sprite 表的第一部分淡入 Sprite 表的第二部分，就好像它们是两个单独的图像一样，有点像这样:http://tinypic.com/view.php?pic=jv6wet&s=9#.VwCUO6QrK5g .有没有可能在 jQuery、CSS 或 Javascript 中执行此操作的方法？

Answer 1

这可以通过 css 来完成...您忘记添加过渡计时功能属性，这可能就是正在发生的事情。尝试

transition: background 0.5s ease;