javascript - 移除 JavaScript 样式，让 CSS 接管控制权

Question

序言: 可以找到我的问题可能重复的内容 here ，虽然对我来说，这个问题没有得到充分回答。提供了解决方法，但未提供是否可行的明确答案。

问题: 在我的网站上，当用户单击按钮(或屏幕区域)时，我希望该区域在返回其原始状态之前“闪烁”几次。 (我认为这会给用户一种被激活的安心感觉，因为在某些情况下，他们可能会在给出反馈之前有短暂的延迟。)

无论如何，我已经设法使用一些 JavaScript 和 jQuery 来完成这项工作，您可以看到结果 here >> .

您可能会注意到，问题在于闪烁完成后，元素不会返回到其原始状态。相反，它保持其最后的“flash”状态，并覆盖在页面加载时最初设置对象样式的底层 CSS 样式。

我使用以下 jQuery 为元素设置样式:

$jq_obj.css('background-color',flash_fg_color_).css('color',flash_bg_color_);

我“尝试”取消样式:

$jq_obj.removeAttr('background-color').removeAttr('color');

我也试过:;

$jq_obj.css('background-color','').css('color','');

尽管文档说这应该删除样式，但事实并非如此。

是否有解决方案，或者我是否必须恢复到序言中提到的变通解决方案？ JavaScript 选项的好处在于，当您想稍微玩一下动画时，它会变得更加通用。

谢谢，

===编辑 2014-06-28===

作为类解决方案不整洁原因的演示，请参阅此 fiddle :http://jsfiddle.net/Y9L4x/ (灵感来自@BiffMaGriff 在这里提出的解决方案:http://jsfiddle.net/rte3G/)

问题是正在闪烁的元素可能已经使用多个类进行了 CSS 处理。

我认识到我可以先删除样式类，然后再应用“flash”类，使 JavaScript 和/或 CSS 规则等复杂化。

但是寻找非类解决方案的全部意义在于这个选项在现实世界的情况下变得极其冗长，而且您往往不得不单独对每个闪烁的对象进行编程，而不是我正在寻找的整洁的 one-JavaScript-function-fits-all。

Answer 1

您将希望将您的样式作为类。

.activated{
    background-color: red; //or whatever else
}

然后使用您的 jquery，您只需切换它们几次，我假设您的 javascript 中已经有延迟。

$jq_obj.toggleClass('activated');