CSS過渡造成的jQuery動畫失敗

Question

我無法得到一個CSS過渡

（到一個div擴展到1.05它的原始大小），很好地發揮沿着頁面下方一個jQuery動畫：

http://www.griffinlive.com/video-packages

當您將鼠標懸停在其中一個彩色div上時，可以看到CSS轉換正在進行，單擊Email Us按鈕將觸發動畫，但動畫會被縮短。

我已經確認刪除CSS動畫可以讓jQuery動畫正確顯示。

我已經確定了兩項行動：

• 刪除CSS從我的樣式表改造和使用jQuery重建的效果。
• 當使用點擊要觸發動畫的鏈接時，移除CSS變換。

我認爲第一種選擇是兩者中較好的，因爲它允許動畫在被帶走之前將其重置爲零。但我願意接受更好的想法，並在此發佈這個小問題。

非常感謝您提供任何幫助。

Answer 1

我會去第一個選項也。

我會動畫不像這樣點擊，並使它們以眼睛的方式消失（我個人喜歡不透明0效果又名.fadeOut() - 它允許我通過jQuery使用不可見但不透明的元素）。

$('#prices>div').not($clicked).animate({...}); 

然後我會動畫顯示點擊的元素去左邊的東西，如下面的代碼：

$('#prices>div').is($clicked).animate({'left':'0'}); 

那麼我想你會想在郵件的形式出現在右邊側？我會褪色的。

我應該注意到，我還沒有測試任何這些代碼，只是從我的頭頂寫出來說明我的意思。我希望這有幫助。