jquery - 动画彩色网络图标字体在 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 设置动画:之前。但是谷歌搜索似乎还不支持动画伪类。

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

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

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