jquery-無法改變顏色/ css的動畫？

Question

好的，我一直在關注這個問題jQuery animate color change，並且完全複製了他們的語法。我試圖在懸停的幾個CSS屬性中設置動畫效果，從邊框顏色開始。

本來我在我的功能裏有$(".panel-default", this).css("border-color", "#ddd");，但那是瞬間的。現在我有：

$(".lab1, .lab2, .lab3").hover(function(){ 

    $(".panel-default", this).animate({"border-color":"green"}, 200); 

}, function() { 

// $(".panel-default", this).css("border-color", "#ddd"); 
// $(".panel-default > .panel-heading", this).css("background-color", "#f5f5f5"); 
// $(".panel-default > .panel-heading", this).css("border-color", "#ddd"); 
// $(".panel-default > .panel-heading", this).css("color", "#565656"); 
    $(".panel-default", this).animate({"border-color":"black"}, 200); 

}); 

但是什麼也沒有發生。我如何在懸停時動畫改變CSS？

Answer 1

您可以利用css:hover

[class*=lab-] .panel-default { 
 
    display:block; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 4px solid black; 
 
    border-color: black; 
 
    transition: border-color 200ms ease-in-out; 
 
} 
 
[class*=lab]:hover .panel-default { 
 
    border-color: green; 
 
}

<div class="lab-1"> 
 
    <div class="panel-default"> 
 
    </div> 
 
</div> 
 
<div class="lab-2"> 
 
    <div class="panel-default"> 
 
    </div> 
 
</div> 
 
<div class="lab-3"> 
 
    <div class="panel-default"> 
 
    </div> 
 
</div>