skyguy skyguy - 3 months ago 7
CSS Question

jquery- Cant animate change in color/css?

Ok so I have been following this question jQuery animate color change and have copied their syntax exactly. Im trying to animate a change in a few css properties on hover, starting with border-color.

Originally I had

$(".panel-default", this).css("border-color", "#ddd");
within my function but that was instant. Now I have:

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

});

});


But nothing is happening. How can I animate change in css on hover?

Answer

You can utilize 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>

Comments