javascript - 两个类之间的动画颜色
问题描述
我想在鼠标离开块后通过动画将颜色从灰色渐变为粉红色。
但是我试图在两个类之间制作动画，它似乎不起作用。
任何帮助将不胜感激。
$('.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>这将current在 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;
}
}
推荐阅读
- java - 如何让用户输入进入for循环并使程序循环直到用户输入退出
- sql - 查询一个多值列的多个值
- java - 获取矩阵的平均值
- windows - 如何使用 .bat 文件打开新的 Chrome 标签页
- excel - 使用 Find 方法取消隐藏列
- python - 加载脚本时出错：无法获取未定义或空引用的属性“版本”
- reactjs - 有没有办法在 react-responsive-carousal 中为每张幻灯片设置不同的时间间隔？
- javascript - 如何在 Web 开发中禁用 Firebase 的实时更新？
- ruby-on-rails - 从 RoR 中的同一模型获取两个索引请求的最佳方法是什么？
- r - 如何修复 R Studio 停止按空格键来完成每个单词？