動畫在IE

失敗我想創建一個jQuery插件，可以讓我們在標記加起來入口和出口的動畫。

我有入口動畫在Chrome和Firefox的工作，但動畫是由

animate({'top':posData.top+'px', 'left': posData.left+'px', 'opacity': 1}, speed)

或它的變體光盤（取決於執行他們有在IE7或IE8

沒有影響在所需的方向上）。 posData正在記錄到控制檯，以便您可以查看可能的值。 speed設置在插件的開始處。

2012-02-07 Mild Fuzz

如果您有任何解決方案，請在此處發佈。它會幫助其他面臨同樣問題的人。謝謝。 – 2012-02-08 04:08:01

以下回答我自己，希望它可以幫助別人。 – 2012-02-08 11:28:26

你也可以接受你的答案。 – 2012-02-08 11:30:51

這是一個組合，這些因素：

元素需要hasLayout
需要使用過濾器：alpha（opacity = 70）;爲不透明度正常工作
Chrome似乎不喜歡data屬性中的大寫字母，這使得我在JavaScript中刪除它們。 Chrome和Firefox都很滿意，但IE強調這些情況相匹配，因此將HTML中的data-屬性更改爲小寫字母，並確保它們的JS對應項匹配。

2012-02-08 11:27:52

+1有趣的學習 – 2012-02-08 11:30:10

IE8和IE7不支持CSS2 - opacity，您將需要filter: alpha(opacity=70);。請閱讀更多詳情here。

在你的jsFiddle中，你正在改變div的不透明度。由於IE8和IE7不支持opacity，您看不到任何動畫。

編輯

入住這this職位上SO。它提到了解決問題的hasLayout。

希望這可以幫助你。

2012-02-07 13:07:25

你能解決這個問題，如果你不透明度與jQuery .css()設置爲0：

$('.animate').anim().css({"opacity": 0});

jQuery是使用有問題的瀏覽器右側不透明度濾光器。

或者你可以在CSS直接我想使用的過濾器，由阿馬爾提到...（但隨後的CSS驗證失敗）

2012-02-07 13:13:03 meo

沒有好的，不透明度需要默認爲0，沒有JS。 :( – 2012-02-07 14:01:28

回答