更改字體真棒類在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