JSFiddle - React, Tailwind, and code Playground
by falkone
JavaScript
// var position = $(this).position();
// var squarePosY = (position.top / squareSize) + 1;
// console.log(squarePosY);
// var squarePosX = (position.left / squareSize) + 1;
// console.log(squarePosX);
// var top = n - items;
// var topX = $('.wrapper .child:nth-child('+ top +')');
// top = top * itemsPlus;
// var bottom = n + items;
// var bottomX = $('.wrapper .child:nth-child('+ bottom +')');
// itemsPlus++;
// for (var i = 0; i <= a; i++) {
// (function () {
// setTimeout(function() {
// var select = $('.wrapper .child:nth-child('+ n +')');
// var next = $('.wrapper .child:nth-child('+ (n+b) +')');
// var prev = $('.wrapper .child:nth-child('+ (n-b) +')');
// var top = $('.wrapper .child:nth-child('+ (n - x) +')');
// var top2 = $('.wrapper .child:nth-child('+ (n - x + 1) +')');
// var top3 = $('.wrapper .child:nth-child('+ (n - x - 1) +')');
// var bottom = $('.wrapper .child:nth-child('+ (n + y) +')');
// var bottom2 = $('.wrapper .child:nth-child('+ (n + y + 1) +')');
// var bottom3 = $('.wrapper .child:nth-child('+ (n + y - 1) +')');
// b++;
// x++;
// y++;
// var arr = [];
// arr.push(top, bottom, prev, next, select, top2, top3, bottom2, bottom3);
// jQuery.each(arr, function() {
// $(this).css({background: 'red'});
// })
// }, i * 100);
// })(i);
// };
// var select = $('.wrapper .child:nth-child('+ n +')');
// var next = $('.wrapper .child:nth-child('+ (n+1) +')');
// var prev = $('.wrapper .child:nth-child('+ (n-1) +')');
// var bottom = $('.wrapper .child:nth-child('+ (n - items) +')');
// var top = $('.wrapper .child:nth-child('+ (n + items) +')');
// select.css({background: 'red'});
// next.css({background:...