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>