Javascript 在两个类之间设置颜色动画

我想设置从灰色到粉红色的颜色淡入动画后，鼠标删除块

然而，我试图在两个类之间设置动画，它似乎不起作用

任何帮助都将不胜感激

$（'.blocks'）.mouseenter（函数（）{
$（this.addClass（'current'）；
setTimeout（函数（）{
//$（this）.animate（'.current'，null）；//此行不起作用
},1500);
});
.playboard{
宽度：330px；
}
.街区
{
显示：内联块；
宽度：30px；
高度：30px；
背景颜色：粉红色；
}
.blocks.current{
背景颜色：灰色；
}
这就是你想要的吗`

演示


$（'.blocks'）.mouseenter（函数（）{
var$this=$（this）；
$this.addClass（'current'）；
setTimeout（函数（）{
$this.addClass（“完成”）
}, 1900);
});
.playboard{
宽度：330px；
}
.街区{
显示：内联块；
宽度：30px；
高度：30px；
背景颜色：粉红色；
}
.blocks.当前：未（.Done）{
背景颜色：灰色；
动画名称：黑白；
动画持续时间：2秒；
}
@-webkit关键帧黑白{
0% {
背景颜色：灰色；
}
50% {
背景颜色：灰色；
}
51% {
背景颜色：灰色；
}
100% {
背景颜色：粉红色；
}
}
这就是你想要的吗`

演示


$（'.blocks'）.mouseenter（函数（）{
var$this=$（this）；
$this.addClass（'current'）；
setTimeout（函数（）{
$this.addClass（“完成”）
}, 1900);
});
.playboard{
宽度：330px；
}
.街区{
显示：内联块；
宽度：30px；
高度：30px；
背景颜色：粉红色；
}
.blocks.当前：未（.Done）{
背景颜色：灰色；
动画名称：黑白；
动画持续时间：2秒；
}
@-webkit关键帧黑白{
0% {
背景颜色：灰色；
}
50% {
背景颜色：灰色；
}
51% {
背景颜色：灰色；
}
100% {
背景颜色：粉红色；
}
}


$（'.blocks'）.mouseenter（函数（）{
$（this.addClass（'current'）；
setTimeout（函数（）{
//$（this.aniamate（'.current'，null）；//此行无效
}, 1500);
});
$（'.blocks'）.mouseleave（函数（）{
$（this.removeClass（'current'）；
$（此）。设置动画({
不透明度：0.5
}，“快速”，函数（）{
$（本）
.removeClass（'当前'）
.制作动画({
不透明度：1
});
});
});
.playboard{
宽度：330px；
}
.街区{
显示：内联块；
宽度：30px；
高度：30px；
背景颜色：粉红色；
}
.blocks.current{
背景颜色：灰色；
}


$（'.blocks'）.mouseenter（函数（）{
$（this.addClass（'current'）；
setTimeout（函数（）{
//$（this.aniamate（'.current'，null）；//此行无效
}, 1500);
});
$（'.blocks'）.mouseleave（函数（）{
$（this.removeClass（'current'）；
$（此）。设置动画({
不透明度：0.5
}，“快速”，函数（）{
$（本）
.removeClass（'当前'）
.制作动画({
不透明度：1
});
});
});
.playboard{
宽度：330px；
}
.街区{
显示：内联块；
宽度：30px；
高度：30px；
背景颜色：粉红色；
}
.blocks.current{
背景颜色：灰色；
}


.playboard{
宽度：330px；
}
.街区{
显示：内联块；
宽度：30px；
高度：30px；
背景颜色：粉红色；
过渡：150ms背景色；
}
.块：悬停{
背景颜色：灰色；
}
.blocks.current{
背景颜色：灰色；
}


.playboard{
宽度：330px；
}
.街区{
显示：内联块；
宽度：30px；
高度：30px；
背景颜色：粉红色；
过渡：150ms背景色；
}
.块：悬停{
背景颜色：灰色；
}
.blocks.current{
背景颜色：灰色；
}