javascript - jQuery 动画和类

标签 javascript html css

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

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

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

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

最佳答案

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

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

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

关于javascript - jQuery 动画和类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2932704/

相关文章:

javascript - 如何在背景设置为图像的完美正方形中创建元素网格(div/spans)

javascript - 如何通过搜索该元素的另一个属性来找到该元素的属性

javascript - 如何使 child 书籍插图的某些区域可点击?

javascript - 使 Bootstrap 折叠动画可选

java - sun.org.mozilla.javascript.internal.NativeJavaObject 无法转换为 java.lang.String

javascript - 无法读取未定义的属性 - D3 hive 图

javascript - knockout - 添加可观察对象不更新新对象

javascript - 固定菜单项

html - 从 Chrome 打印出来的内容不居中

html - 表格中的背景颜色