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/

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

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

2 个答案: