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>