动画彩色 web 图标字体在 IE 8 上不起作用

Question

我对这个问题感到困惑。 我想动画图标字体的颜色，它在所有现代浏览器中都可以正常工作，但在 IE 8 中不行！

我们有一个链接：

<a id="newsletter_subbut"><i class="icon-web-mail"></i></a>

这是我的 CSS 代码：

#newsletter_subbut {
    border: none;
    height: 30px;
    width:40px;
    margin-left: -8px;
    font-size:22px;
    position:absolute;
    display:inline-block;
    padding-top:9px;
    bottom:0px;
    z-index: 1;
}
.icon-web-mail:before {
    font-family: 'batch';
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: "\F14C";
}

这是我的 jQuery 代码：

$('#newsletter_subbut').find("i").stop().animate({color: "#fa2a18"},'slow');

Answer 1

IE8 无法为颜色设置动画，因为浏览器无法自行为颜色设置动画。您需要一个可以为 IE8 工作的脚本。

@Hadi 添加了自定义颜色动画脚本，小巧轻便。

我更喜欢 Jquery UI，因为它会为您解决问题。它已添加到我的 jsfiddle 中。 （参见框架和扩展）。 http://jsfiddle.net/brutusmaximus/667kF/6/

$('#newsletter_subbut').find("i").stop().animate({color: "#fa2a18"},'slow');

更新：您正在添加带有

的图标

i:before { content: \F14C"; }

Jquery 正在为内容的实际 i 设置动画 :before。但是谷歌搜索似乎还不支持动画伪类。

http://css-tricks.com/transitions-and-animations-on-css-generated-content/

有一个解决方案，但只适用于现代浏览器。

您的解决方案是在 html 中添加 unicode。见我的http://jsfiddle.net/brutusmaximus/667kF/8/

Answer 2

我不知道您使用的是哪个版本的 jquery。无论如何，动画颜色不适用于 1.9.1，可能在早期版本中有效。有时 IE8 不理解 animate 属性。你可以这样试试——

$('#newsletter_subbut').find("i").stop().animate({color: "#fa2a18"}, 1000, function(){ $('#newsletter_subbut').find("i").animate({ color: "#fa2a18" }); });

或

$('#newsletter_subbut').find("i").animate({ color: "#000" }); // your original color
$('#newsletter_subbut').find("i").animate({ color: "#fa2a18" });

我知道这很疯狂。但它对我有用。

如果您使用的是 jquery 1.9.x，那么 - 试试这个小提琴 - http://jsfiddle.net/HETuE/ - 它也适用于 ie8