Javascript 在css状态之间设置动画？

我可以在悬停状态之间设置动画吗

例如：

因此，底部边界将从0上升到25px

---

我不确定这在CSS中是否可行，或者我是否必须使用jQuery？

您可以使用CSS3转换，但目前它们的支持还不是很好：

#menu ul li a { -webkit-transition: border .5s ease-in-out; -moz-transition: border .5s ease-in-out; -o-transition: border .5s ease-in-out; transition: border .5s ease-in-out; } #菜单ulli a{ -webkit过渡：边界。5s易入易出； -moz过渡：边界。5s易入易出； -o型过渡：边界。5s易进易出； 过渡：边界。5s轻松进出； } 语法是：

元素

时间

放松

---

这里有一个

您可以使用

您还可以使用它来设置css属性的动画：

$( "#effect" ).animate({
    backgroundColor: "#aa0000",
    color: "#fff",
    width: 500
}, 1000 );

---

这将从当前背景颜色、颜色和宽度设置为您指定的动画。

是的，只需添加CSS过渡

在

#菜单中{

只需添加：

-webkit-transition: border .5s ease-in-out;
-moz-transition: border .5s ease-in-out;
-o-transition: border .5s ease-in-out;
transition: border .5s ease-in-out;

顺便说一下，你不需要ms-one，IE10不使用前缀

---

有关加载的更多信息，请查看CSS3转换将完成的工作：

#menu ul li a {
    display:block;
    color:#FFF;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 5px;
    padding: 0 10px;
    -webkit-transition: border-bottom-width 0.5s ease-in-out;
    -moz-transition: border-bottom-width 0.5s ease-in-out;
    -o-transition: border-bottom-width 0.5s ease-in-out;
    transition: border-bottom-width 0.5s ease-in-out;
}
#menu ul li a:hover {
    color:#fff;
    margin-bottom:5px;
    padding-bottom:5px;
    border-bottom: 25px solid #0488C5;
}

---

1.他没有要求类。2.jQuery UI将添加大约200kb。默认情况下，您不能在jQuery中设置颜色动画。您可以指定一个悬停类并使用jQuery的方法添加它。我还提供直接设置属性动画的替代方法。CSS3转换不如jQuery UI解决方案受支持。当然，大小会增加，但200kb不会“这几天真是太重要了！”马克，我说的是jQueryUI，不是jQuery@Jeroen，哦，抱歉，没有看到。我觉得他们的支持很棒。只是后面缺少IE9。带前缀；-）我指的是标准支持。但是谢谢你提供的信息！为了更好的过渡，需要为两者设置边框。从“无”开始设置动画其他任何东西都是不支持的（这就是为什么你的小提琴会神经质，做奇怪的事情）。那太棒了！谢谢@Alex

-webkit-transition: border .5s ease-in-out;
-moz-transition: border .5s ease-in-out;
-o-transition: border .5s ease-in-out;
transition: border .5s ease-in-out;

#menu ul li a {
    display:block;
    color:#FFF;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 5px;
    padding: 0 10px;
    -webkit-transition: border-bottom-width 0.5s ease-in-out;
    -moz-transition: border-bottom-width 0.5s ease-in-out;
    -o-transition: border-bottom-width 0.5s ease-in-out;
    transition: border-bottom-width 0.5s ease-in-out;
}
#menu ul li a:hover {
    color:#fff;
    margin-bottom:5px;
    padding-bottom:5px;
    border-bottom: 25px solid #0488C5;
}