邊框顏色從左到右動畫

可能重複：
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中。 –

邊框顏色從左到右動畫

回答

相關問題