jquery- Cant animieren Änderung in Farbe/CSS?

Question

Ok also ich habe diese Frage jQuery animate color change verfolgt und ihre Syntax genau kopiert. Ich versuche, eine Änderung in einigen css-Eigenschaften beim Hover zu animieren, beginnend mit border-color.

Ursprünglich hatte ich $(".panel-default", this).css("border-color", "#ddd"); innerhalb meiner Funktion, aber das war sofort. Jetzt habe ich:

$(".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); 

}); 

Aber nichts passiert. Wie kann ich Änderungen in css beim Hover animieren?

Answer 1

können Sie css nutzen :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>