好的,所以我一直在关注这个问题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 中的更改设置动画?
最佳答案
你可以利用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>
关于javascript - jquery- 不能动画化颜色/css 的变化吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39057830/