Question

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

例如：

#menu ul li a {
    display:block;
    margin:0px;
    padding:0px;
    color:#FFF;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 5px;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
#menu ul li a:hover {
    color:#fff;
    margin-bottom:5px;
    padding-bottom:5px;
    border-bottom: 25px solid #0488C5;

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

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

Answer 1

您可以使用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;
}

语法为：element time easing

这是Fiddle

Answer 2

是的，只需添加一个CSS转换。

#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;

顺便说一句，你不需要一个ms，IE10不会使用前缀。

如需了解更多信息，请查看http://css3.bradshawenterprises.com/

Answer 3

您可以使用jQuery UI

在css类之间进行动画制作

$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );

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

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

这将从当前背景颜色，颜色和宽度动画到您指定的颜色。

Answer 4

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;
}

css状态之间的动画？

4 个答案: