边框颜色从左到右动画

可能重复：
jQuery animate border color on hover?边框颜色从左到右动画

好吧，我有这样的代码目前。

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

但什么我尝试实现的是动画在底边框的颜色会淡入淡出由左到右。例如，当用户将鼠标悬停在此动画中时，该元素的底部边框颜色应该从左到右淡入或淡出，如从#fff到＃000这种颜色。

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

我打开任何建议，建议和建议。

，这可以通过jQuery的或CSS3

来源

2012-10-12 Juliver Galleto

动画从左到右....我不认为这是可能的，边框颜色只是1色。尽管如此，你可以将它从x颜色设置为y颜色。 –

让我改述一下。不可能仅使用边框，您需要使用其他元素来伪造动画。例如，您可以创建一个1px（或2px，无论您的边框的厚度）条带，该条带在边界处的底部是透明的，并从左至右动画一个图形，从而给出动画边界从左至右的动画效果对。 –

您可以使用简单的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

来源

2012-10-12 21:39:18

我的意思是从左向右切换底部边框颜色的动画，而不是直接切换边框。 –

从我所看到的，你将不得不伪造它 - 在元素的底部添加一个新的div，给它一个边界高度的高度，然后查看here （demo page）以获取示例代码。

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

来源

2012-10-12 21:43:05 Joe

我在下面添加一个div到指定的元素，我想要动画并将其设置为1宽度和1高度和#fff的背景，然后使用jquery通过将宽度从最小值扩展到最大值，然后更改底部边界＃000到#fff再回来。那会工作吗？ :) –

不完全 - 你有一个（说）100像素的梯度从黑色到白色，然后你在右边添加另一个（比如说）600px，并用白色填充它。您现在有一张700像素的图像，其中大部分是纯白色的，并且稍微有点过渡。现在你创建动画的位置，将它从右向左移动（黑色渐变为白色）或从左向右（将白色渐变为黑色） – Joe

好吧，我现在有了这个想法，但现在我的问题是如何编码它在jQuery中。 –

边框颜色从左到右动画

回答

相关问题