如何結合多個轉換與jQuery？

Question

我想創建一個使用CSS3轉換的效果。 div應該在mouseover上改變它的寬度和背景顏色。然後在鼠標懸停時，它應該等待2秒鐘，然後返回到正常的寬度和背景顏色。我所做的是在鼠標懸停上通過jQuery添加類hoverclass，並在鼠標移除時將其刪除。檢查出Fiddle。

我對此有兩個問題。首先，瀏覽器會以不同的方式演繹小提琴。在Chrome中，一切正常，在mouseover上div會立即改變寬度，然後等待鼠標移動2秒後恢復正常大小。然而，在Firefox中，新添加的hoverclass將被直接用作新的轉換規則。所以會發生的是，在鼠標懸停時，動畫將在2秒後開始。然後在mouseout上，這個類將被刪除，並且Firefox會採用#test的轉換規則，因此div將直接恢復到正常大小，而不會延遲。

我注意到的第二件事是，當我嘗試使用兩個屬性（背景顏色和寬度）時僅爲寬度使用新的過渡規則（如在hoverclass中）時，它會覆蓋背景顏色。這是否意味着我必須將所有我在#test中使用的過渡屬性寫在懸浮類中？

Answer 1

你把2s放在錯誤的CSS選擇器上。你真的不需要添加額外的類。所以你可以擺脫jQuery。你可以使用：hover轉換。 http://jsfiddle.net/MMKnx/1/

#test 
{ 
    width:100px; 
    height:500px; 
    background-color:#06F; 
    -webkit-transition: background-color .5s ease-in-out,width .5s ease 2s; 
    -moz-transition: background-color .5s ease-in-out,width .5s ease 2s; 
    -o-transition: background-color .5s ease-in-out,width .5s ease 2s; 
    transition: background-color .5s ease-in-out,width .5s ease 2s; 
} 
#test:hover 
{ 
    -webkit-transition: width .75s ease; 
    -moz-transition: width .75s ease; 
    -o-transition: width .75s ease; 
    transition: width .75s ease; 
} 
#test:hover 
{ 
    background-color:#96C; 
    width:800px; 
}