Question

可能重复：
jQuery animate border color on hover?

好的，我目前有这个代码。

$(document).ready(function(){
   $('.animation').mouseover(function(){
        $(this).animate({ borderTopColor: "#000" }, 'fast');
   });
});

但是我想要实现的是为从左到右淡入淡出的底部边框颜色设置动画。例如，每当用户将鼠标悬停在此.animation中时，该元素的底部边框颜色应从左到右淡入或淡出，例如从此颜色#fff变为＃000。

希望这里有人能想出如何做到这一点。谢谢。

我对任何建议，建议和建议持开放态度。

这可以通过jquery或css3

来完成

Answer 1

你可以使用简单的CSS ...

试试这个

<div id="div1">

</div>

<强> CSS

div
{
    width:100px;
    height:100px;
    background-color: orange;
}

#div1
{
    border-left: 2px solid red;
}

#div1:hover
{
    border-left: 0;
    border-right: 2px solid red;
}

<强> CHECK FIDDLE

Answer 2

从我所看到的，你将不得不伪造它 - 在元素的底部添加一个新的div，给它一个高度，无论边界高度是多少，并查看{{3 （here）用于获取示例代码。

演示页面上的示例B看起来（基本上）正是您想要的。将背景图像更改为渐变而不是纯色，您应该获得从左到右的颜色更改效果。

边框颜色从左到右动画

2 个答案: