CODEWITHSUNDEEP
javascriptjqueryjquery-animate
Wils
Wils

Reputation: 1231

Animate color between two class

I want to set the colour fade from grey to pink with animation after the mouseleave the blocks.

However I tried to animate between two classes, it seems not to work.

Any help would be very appreciated.

$('.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>

Upvotes: 0

Views: 54

Answers (3)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

Is this what you want`?

demo

$('.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>

This will remove the current class after 1,5 seconds.

$('.blocks').mouseenter(function() {
  var $this = $(this);
  $this.addClass('current');
  setTimeout(function() {
    $this.removeClass("current")
  }, 2000);
});

Combine it with to make it change into multiple colors over time.

.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;
  }
}

Upvotes: 2

user1496463
user1496463

Reputation: 410

.playboard {
  width: 330px;
}

.blocks {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: pink;
  transition: 150ms background-color;
}

.blocks:hover {
  background-color: grey;
}

.blocks.current {
  background-color: grey;
}
<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>

Using Pure Css.

Upvotes: 0

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

$('.blocks').mouseenter(function() {
  $(this).addClass('current');
  setTimeout(function() {
    //$(this).aniamate('.current',null); //this line is not working
  }, 1500);
});
$('.blocks').mouseleave(function() {
  $(this).removeClass('current');
  $(this).animate({
    opacity: 0.5
  }, 'fast', function() {
    $(this)
      .removeClass('current')
      .animate({
        opacity: 1
      });
  });
});
.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>

Upvotes: 0

Related Questions