Question

好的，所以我一直在关注这个问题jQuery animate color change并完全复制了他们的语法。我试图在悬停时动画一些css属性的变化，从border-color开始。

最初我的功能中有$(".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>

jquery-不能改变颜色/ css的动画？

1 个答案: