2

我可以在悬停状态之间制作动画吗？

例如：

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

4

4 回答 4

9

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

#menu ul li a {
    -webkit-transition：边框 .5s 缓入出局；
    -moz-transition：边框 .5s 缓进出；
    -o-transition：边框 .5s 缓入出局；
    过渡：边界 .5s 缓进出；
}

语法是：element time easing

这是一个小提琴

于 2012-09-25T10:24:54.703 回答
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/

于 2012-09-25T10:25:59.617 回答
0

您可以使用jQuery UI在 css 类之间制作动画

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

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

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

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

于 2012-09-25T10:25:08.527 回答
0

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;
}
于 2012-09-25T10:29:16.317 回答