javascript - jQuery 动画和类

Question

假设您有一个列表项，<li id="foo">当鼠标悬停在上面时，您想从一种颜色淡入另一种颜色，并且您正在使用 jQuery。这相当简单:

$('li#foo').bind('mouseenter' , function(e) { 
    $(this).animate({backgroundColor: '#F00'} , 300); 
});

但是，如果您想从 CSS 中定义的类中获取结果颜色或其他样式规则而不用 JavaScript 声明它们怎么办？似乎没有办法从 CSS 规则中学习样式信息没有文档中已有的规则示例，这将要求您为 <li> 设置动画到目标外观，然后在动画完成的回调中，设置导致冗余样式声明并可能在“运行时”弄乱您的 CSS 的类。

抱歉，如果这个问题不清楚:它不会出现在任何特定元素的上下文中，我只是想知道您将如何处理这个问题。此外，我知道 CSS3 假设包括对此类转换的支持，但使用 CSS 进行动态行为似乎是一种丑陋的 hack。

Answer 1

我很确定 javascript 无法读取您的样式表。

如果您希望样式表中的某个属性不会出现在页面的任何位置，您将必须添加一个应用了该样式的不可见元素，无论是在页面加载时在 html 中还是在任何时候使用 javascript你想要的。

虽然这看起来有点理论化，但与其在您的样式表中定义您不使用的样式，不如直接在 javascript 中声明适当的变量。