如何结合多个转换与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; 
}