更改字体真棒类在IE11上无法正常工作

我在这里遇到了跨浏览器问题。请参阅以下的jsfiddle：更改字体真棒类在IE11上无法正常工作

这个简短的脚本简单地渲染使用FA-微调和FA-脉冲4项装载机的图标。然后在文档加载中，我将类更改为fa检查。

下面是HTML：

<i id="i1" class="fa fa-spinner fa-pulse"></i> 
<i id="i2" class="fa fa-spinner fa-pulse"></i> 
<i id="i3" class="fa fa-spinner fa-pulse"></i> 
<i id="i4" class="fa fa-spinner fa-pulse"></i>

这是JavaScript：

$(document).ready(function() { 
    $('#i4').attr('class', 'fa fa-check'); 
    $('#i3').attr('class', 'fa fa-check'); 
    $('#i1').attr('class', 'fa fa-check'); 
    $('#i2').attr('class', 'fa fa-check'); 
});

这是所有工作在Firefox和Chrome的罚款。但是，在IE11中，只有第一个元素正确显示，而第二个元素被更改为复选标记，但它们保持旋转状态。

它看起来像是因为某些原因，动画没有在IE上停止。

有谁知道为什么会发生这种情况，我该如何解决这个问题？

编辑：简化版本

来源

2016-03-08 Bart van der Drift

而不是替换'ATTR（）'的，请尝试使用'toggleClass（）'：'toggleClass（'fa-spinner fa-pulse fa-check'）;' –

感谢您的建议。试过了。没有骰子... –

现在我已经找到了一种解决方法，将图标包装在div中，并用更新的类替换整个元素。如果有人提出了一个真正的解决方案，我仍然会接受这个答案。

新的HTML：

<div id="c1"><i class="fa fa-spinner fa-pulse"></i></div> 
<div id="c2"><i class="fa fa-spinner fa-pulse"></i></div> 
<div id="c3"><i class="fa fa-spinner fa-pulse"></i></div> 
<div id="c4"><i class="fa fa-spinner fa-pulse"></i></div>

新的JS：

$(document).ready(function() { 
    $('#c4').html('<i class="fa fa-check"></i>'); 
    $('#c3').html('<i class="fa fa-check"></i>'); 
    $('#c1').html('<i class="fa fa-check"></i>'); 
    $('#c2').html('<i class="fa fa-check"></i>'); 
});

新小提琴：

https://jsfiddle.net/utcxvxk0/3/

来源

2016-03-08 14:14:05