我想在鼠标离开 block 后用动画设置颜色从灰色渐变到粉红色。
但是我尝试在两个类之间设置动画，但似乎不起作用。
任何帮助将不胜感激。
$('.blocks').mouseenter(function(){
$(this).addClass('current');
setTimeout(function(){
//$(this).animate('.current',null); //this line is not working
},1500);
});.playboard{
width: 330px;
}
.blocks
{
display: inline-block;
width: 30px;
height: 30px;
background-color:pink;
}
.blocks.current{
background-color:grey;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="playboard"><div class="blocks" data-x="0" data-y="0"></div><div class="blocks" data-x="0" data-y="1"></div><div class="blocks" data-x="0" data-y="2"></div><div class="blocks" data-x="0" data-y="3"></div><div class="blocks" data-x="0" data-y="4"></div><div class="blocks" data-x="0" data-y="5"></div><div class="blocks" data-x="0" data-y="6"></div><div class="blocks" data-x="0" data-y="7"></div><div class="blocks" data-x="0" data-y="8"></div><div class="blocks" data-x="0" data-y="9"></div><div class="blocks" data-x="0" data-y="10"></div><div class="blocks" data-x="1" data-y="0"></div><div class="blocks" data-x="1" data-y="1"></div><div class="blocks" data-x="1" data-y="2"></div><div class="blocks" data-x="1" data-y="3"></div><div class="blocks" data-x="1" data-y="4"></div><div class="blocks" data-x="1" data-y="5"></div><div class="blocks" data-x="1" data-y="6"></div><div class="blocks" data-x="1" data-y="7"></div><div class="blocks" data-x="1" data-y="8"></div><div class="blocks" data-x="1" data-y="9"></div><div class="blocks" data-x="1" data-y="10"></div><div class="blocks" data-x="2" data-y="0"></div><div class="blocks" data-x="2" data-y="1"></div><div class="blocks" data-x="2" data-y="2"></div><div class="blocks" data-x="2" data-y="3"></div><div class="blocks" data-x="2" data-y="4"></div><div class="blocks" data-x="2" data-y="5"></div><div class="blocks" data-x="2" data-y="6"></div><div class="blocks" data-x="2" data-y="7"></div><div class="blocks" data-x="2" data-y="8"></div><div class="blocks" data-x="2" data-y="9"></div><div class="blocks" data-x="2" data-y="10"></div><div class="blocks" data-x="3" data-y="0"></div><div class="blocks" data-x="3" data-y="1"></div><div class="blocks" data-x="3" data-y="2"></div><div class="blocks" data-x="3" data-y="3"></div><div class="blocks" data-x="3" data-y="4"></div><div class="blocks" data-x="3" data-y="5"></div><div class="blocks" data-x="3" data-y="6"></div><div class="blocks" data-x="3" data-y="7"></div><div class="blocks" data-x="3" data-y="8"></div><div class="blocks" data-x="3" data-y="9"></div><div class="blocks" data-x="3" data-y="10"></div><div class="blocks" data-x="4" data-y="0"></div><div class="blocks" data-x="4" data-y="1"></div><div class="blocks" data-x="4" data-y="2"></div><div class="blocks" data-x="4" data-y="3"></div><div class="blocks" data-x="4" data-y="4"></div><div class="blocks" data-x="4" data-y="5"></div><div class="blocks" data-x="4" data-y="6"></div><div class="blocks" data-x="4" data-y="7"></div><div class="blocks" data-x="4" data-y="8"></div><div class="blocks" data-x="4" data-y="9"></div><div class="blocks" data-x="4" data-y="10"></div><div class="blocks" data-x="5" data-y="0"></div><div class="blocks" data-x="5" data-y="1"></div><div class="blocks" data-x="5" data-y="2"></div><div class="blocks" data-x="5" data-y="3"></div><div class="blocks" data-x="5" data-y="4"></div><div class="blocks" data-x="5" data-y="5"></div><div class="blocks" data-x="5" data-y="6"></div><div class="blocks" data-x="5" data-y="7"></div><div class="blocks" data-x="5" data-y="8"></div><div class="blocks" data-x="5" data-y="9"></div><div class="blocks" data-x="5" data-y="10"></div><div class="blocks" data-x="6" data-y="0"></div><div class="blocks" data-x="6" data-y="1"></div><div class="blocks" data-x="6" data-y="2"></div><div class="blocks" data-x="6" data-y="3"></div><div class="blocks" data-x="6" data-y="4"></div><div class="blocks" data-x="6" data-y="5"></div><div class="blocks" data-x="6" data-y="6"></div><div class="blocks" data-x="6" data-y="7"></div><div class="blocks" data-x="6" data-y="8"></div><div class="blocks" data-x="6" data-y="9"></div><div class="blocks" data-x="6" data-y="10"></div><div class="blocks" data-x="7" data-y="0"></div><div class="blocks" data-x="7" data-y="1"></div><div class="blocks" data-x="7" data-y="2"></div><div class="blocks" data-x="7" data-y="3"></div><div class="blocks" data-x="7" data-y="4"></div><div class="blocks" data-x="7" data-y="5"></div><div class="blocks" data-x="7" data-y="6"></div><div class="blocks" data-x="7" data-y="7"></div><div class="blocks" data-x="7" data-y="8"></div><div class="blocks" data-x="7" data-y="9"></div><div class="blocks" data-x="7" data-y="10"></div><div class="blocks" data-x="8" data-y="0"></div><div class="blocks" data-x="8" data-y="1"></div><div class="blocks" data-x="8" data-y="2"></div><div class="blocks" data-x="8" data-y="3"></div><div class="blocks" data-x="8" data-y="4"></div><div class="blocks" data-x="8" data-y="5"></div><div class="blocks" data-x="8" data-y="6"></div><div class="blocks" data-x="8" data-y="7"></div><div class="blocks" data-x="8" data-y="8"></div><div class="blocks" data-x="8" data-y="9"></div><div class="blocks" data-x="8" data-y="10"></div><div class="blocks" data-x="9" data-y="0"></div><div class="blocks" data-x="9" data-y="1"></div><div class="blocks" data-x="9" data-y="2"></div><div class="blocks" data-x="9" data-y="3"></div><div class="blocks" data-x="9" data-y="4"></div><div class="blocks" data-x="9" data-y="5"></div><div class="blocks" data-x="9" data-y="6"></div><div class="blocks" data-x="9" data-y="7"></div><div class="blocks" data-x="9" data-y="8"></div><div class="blocks" data-x="9" data-y="9"></div><div class="blocks" data-x="9" data-y="10"></div><div class="blocks" data-x="10" data-y="0"></div><div class="blocks" data-x="10" data-y="1"></div><div class="blocks" data-x="10" data-y="2"></div><div class="blocks" data-x="10" data-y="3"></div><div class="blocks" data-x="10" data-y="4"></div><div class="blocks" data-x="10" data-y="5"></div><div class="blocks" data-x="10" data-y="6"></div><div class="blocks" data-x="10" data-y="7"></div><div class="blocks" data-x="10" data-y="8"></div><div class="blocks" data-x="10" data-y="9"></div><div class="blocks" data-x="10" data-y="10"></div></div>最佳答案
这是你想要的吗`？
演示
$('.blocks').mouseenter(function() {
var $this = $(this);
$this.addClass('current');
setTimeout(function() {
$this.addClass("Done")
}, 1900);
});.playboard {
width: 330px;
}
.blocks {
display: inline-block;
width: 30px;
height: 30px;
background-color: pink;
}
.blocks.current:not(.Done) {
background-color: grey;
animation-name: blackWhite;
animation-duration: 2s;
}
@-webkit-keyframes blackWhite {
0% {
background-color: grey;
}
50% {
background-color: grey;
}
51% {
background-color: grey;
}
100% {
background-color: pink;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="playboard">
<div class="blocks" data-x="0" data-y="0"></div>
<div class="blocks" data-x="0" data-y="1"></div>
<div class="blocks" data-x="0" data-y="2"></div>
<div class="blocks" data-x="0" data-y="3"></div>
<div class="blocks" data-x="0" data-y="4"></div>
<div class="blocks" data-x="0" data-y="5"></div>
<div class="blocks" data-x="0" data-y="6"></div>
<div class="blocks" data-x="0" data-y="7"></div>
<div class="blocks" data-x="0" data-y="8"></div>
<div class="blocks" data-x="0" data-y="9"></div>
<div class="blocks" data-x="0" data-y="10"></div>
<div class="blocks" data-x="1" data-y="0"></div>
<div class="blocks" data-x="1" data-y="1"></div>
<div class="blocks" data-x="1" data-y="2"></div>
<div class="blocks" data-x="1" data-y="3"></div>
<div class="blocks" data-x="1" data-y="4"></div>
<div class="blocks" data-x="1" data-y="5"></div>
<div class="blocks" data-x="1" data-y="6"></div>
<div class="blocks" data-x="1" data-y="7"></div>
<div class="blocks" data-x="1" data-y="8"></div>
<div class="blocks" data-x="1" data-y="9"></div>
<div class="blocks" data-x="1" data-y="10"></div>
<div class="blocks" data-x="2" data-y="0"></div>
<div class="blocks" data-x="2" data-y="1"></div>
<div class="blocks" data-x="2" data-y="2"></div>
<div class="blocks" data-x="2" data-y="3"></div>
<div class="blocks" data-x="2" data-y="4"></div>
<div class="blocks" data-x="2" data-y="5"></div>
<div class="blocks" data-x="2" data-y="6"></div>
<div class="blocks" data-x="2" data-y="7"></div>
<div class="blocks" data-x="2" data-y="8"></div>
<div class="blocks" data-x="2" data-y="9"></div>
<div class="blocks" data-x="2" data-y="10"></div>
<div class="blocks" data-x="3" data-y="0"></div>
<div class="blocks" data-x="3" data-y="1"></div>
<div class="blocks" data-x="3" data-y="2"></div>
<div class="blocks" data-x="3" data-y="3"></div>
<div class="blocks" data-x="3" data-y="4"></div>
<div class="blocks" data-x="3" data-y="5"></div>
<div class="blocks" data-x="3" data-y="6"></div>
<div class="blocks" data-x="3" data-y="7"></div>
<div class="blocks" data-x="3" data-y="8"></div>
<div class="blocks" data-x="3" data-y="9"></div>
<div class="blocks" data-x="3" data-y="10"></div>
<div class="blocks" data-x="4" data-y="0"></div>
<div class="blocks" data-x="4" data-y="1"></div>
<div class="blocks" data-x="4" data-y="2"></div>
<div class="blocks" data-x="4" data-y="3"></div>
<div class="blocks" data-x="4" data-y="4"></div>
<div class="blocks" data-x="4" data-y="5"></div>
<div class="blocks" data-x="4" data-y="6"></div>
<div class="blocks" data-x="4" data-y="7"></div>
<div class="blocks" data-x="4" data-y="8"></div>
<div class="blocks" data-x="4" data-y="9"></div>
<div class="blocks" data-x="4" data-y="10"></div>
<div class="blocks" data-x="5" data-y="0"></div>
<div class="blocks" data-x="5" data-y="1"></div>
<div class="blocks" data-x="5" data-y="2"></div>
<div class="blocks" data-x="5" data-y="3"></div>
<div class="blocks" data-x="5" data-y="4"></div>
<div class="blocks" data-x="5" data-y="5"></div>
<div class="blocks" data-x="5" data-y="6"></div>
<div class="blocks" data-x="5" data-y="7"></div>
<div class="blocks" data-x="5" data-y="8"></div>
<div class="blocks" data-x="5" data-y="9"></div>
<div class="blocks" data-x="5" data-y="10"></div>
<div class="blocks" data-x="6" data-y="0"></div>
<div class="blocks" data-x="6" data-y="1"></div>
<div class="blocks" data-x="6" data-y="2"></div>
<div class="blocks" data-x="6" data-y="3"></div>
<div class="blocks" data-x="6" data-y="4"></div>
<div class="blocks" data-x="6" data-y="5"></div>
<div class="blocks" data-x="6" data-y="6"></div>
<div class="blocks" data-x="6" data-y="7"></div>
<div class="blocks" data-x="6" data-y="8"></div>
<div class="blocks" data-x="6" data-y="9"></div>
<div class="blocks" data-x="6" data-y="10"></div>
<div class="blocks" data-x="7" data-y="0"></div>
<div class="blocks" data-x="7" data-y="1"></div>
<div class="blocks" data-x="7" data-y="2"></div>
<div class="blocks" data-x="7" data-y="3"></div>
<div class="blocks" data-x="7" data-y="4"></div>
<div class="blocks" data-x="7" data-y="5"></div>
<div class="blocks" data-x="7" data-y="6"></div>
<div class="blocks" data-x="7" data-y="7"></div>
<div class="blocks" data-x="7" data-y="8"></div>
<div class="blocks" data-x="7" data-y="9"></div>
<div class="blocks" data-x="7" data-y="10"></div>
<div class="blocks" data-x="8" data-y="0"></div>
<div class="blocks" data-x="8" data-y="1"></div>
<div class="blocks" data-x="8" data-y="2"></div>
<div class="blocks" data-x="8" data-y="3"></div>
<div class="blocks" data-x="8" data-y="4"></div>
<div class="blocks" data-x="8" data-y="5"></div>
<div class="blocks" data-x="8" data-y="6"></div>
<div class="blocks" data-x="8" data-y="7"></div>
<div class="blocks" data-x="8" data-y="8"></div>
<div class="blocks" data-x="8" data-y="9"></div>
<div class="blocks" data-x="8" data-y="10"></div>
<div class="blocks" data-x="9" data-y="0"></div>
<div class="blocks" data-x="9" data-y="1"></div>
<div class="blocks" data-x="9" data-y="2"></div>
<div class="blocks" data-x="9" data-y="3"></div>
<div class="blocks" data-x="9" data-y="4"></div>
<div class="blocks" data-x="9" data-y="5"></div>
<div class="blocks" data-x="9" data-y="6"></div>
<div class="blocks" data-x="9" data-y="7"></div>
<div class="blocks" data-x="9" data-y="8"></div>
<div class="blocks" data-x="9" data-y="9"></div>
<div class="blocks" data-x="9" data-y="10"></div>
<div class="blocks" data-x="10" data-y="0"></div>
<div class="blocks" data-x="10" data-y="1"></div>
<div class="blocks" data-x="10" data-y="2"></div>
<div class="blocks" data-x="10" data-y="3"></div>
<div class="blocks" data-x="10" data-y="4"></div>
<div class="blocks" data-x="10" data-y="5"></div>
<div class="blocks" data-x="10" data-y="6"></div>
<div class="blocks" data-x="10" data-y="7"></div>
<div class="blocks" data-x="10" data-y="8"></div>
<div class="blocks" data-x="10" data-y="9"></div>
<div class="blocks" data-x="10" data-y="10"></div>
</div>这将在 1.5 秒后删除当前类。
$('.blocks').mouseenter(function() {
var $this = $(this);
$this.addClass('current');
setTimeout(function() {
$this.removeClass("current")
}, 2000);
});
将其与它结合起来，使其随着时间的推移变成多种颜色。
.blocks.current {
background-color: grey;
animation-name: blackWhite;
animation-duration: 2s;
}
@-webkit-keyframes blackWhite {
0% {
background-color: white;
}
50% {
background-color: blue;
}
51% {
background-color: grey;
}
100% {
background-color: pink;
}
}
关于javascript - 两个类之间的动画颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50037453/