jquery - 边框颜色从左到右动画

Question

可能重复：
悬停时的jQuery动画边框颜色？

好的，我目前有此代码。

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

检查小提琴

Answer 2

据我所知，你将不得不伪造它——在元素底部添加一个新的 div，给它一个与边框高度相同的高度，然后查看这里（演示页面）示例代码来做到这一点。

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