jquery - 如何将多个转换与 jQuery 结合起来？

Question

我想使用 CSS3 过渡创建效果。 div 应该在鼠标悬停时改变它的宽度和背景颜色。然后在 mouseout 上它应该等待 2 秒然后返回到它的正常宽度和背景颜色。我所做的是在鼠标悬停时通过 jQuery 添加一个类 hoverclass 并在鼠标移出时将其删除。查看 Fiddle .

我有两个问题。第一件事是浏览器会以不同的方式解释 fiddle 。在 Chrome 中一切正常，在鼠标悬停时 div 将立即更改其宽度，然后在鼠标移出时等待 2 秒并返回正常大小。而在 Firefox 中，新添加的 hoverclass 将直接用作新的转换规则。所以发生的事情是在鼠标悬停时动画将在 2 秒后开始。然后在 mouseout 上类将被删除，Firefox 将采用 #test 的转换规则，因此 div 将立即恢复到正常大小。

我注意到的第二件事是，当我尝试为两个属性(背景颜色和宽度)设置动画时，如果仅针对宽度使用新的过渡规则(例如在 hoverclass 中)，它将覆盖背景颜色的属性。这是否意味着我必须在 hoverclass 中编写我在 #test 中使用的所有过渡属性？

Answer 1

您将 2s 放在错误的 css 选择器上。您真的不需要添加额外的类(class)。所以你可以摆脱 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;
}