I am trying to achieve a smooth transition for grid[row1][col1] sliding over to grid[row2][col2], followed by an expansion to 90x90px
Does anyone have any suggestions on how to accomplish this?
Here is an example of the styling:
<style type="text/css">
#grid {
background-color: #ccc0b3;
width: 400px;
height: 400px;
position: relative;
border-radius: 5px;
}
.box {
width: 80px;
height: 80px;
border-radius: 5px;
font-family: Arial, sans-serif;
font-size: 35px;
font-weight: bold;
display: inline-block;
position: absolute;
padding: 5px;
margin: 5px;
text-align: center;
line-height: 80px;
}
</style>
Javascript function for creating the class named box:
function makeNew(row, col) {
var number = Math.random() < 0.9 ? 2 : 4;
var color = pikColor(number);
var textcolor = textColor(number);
return grid[row][col] = $('<div>')
.css({
background: color,
color: "blue",
top : row * 100 + 'px',
left : col * 100 + 'px'
})
.text(number)
.addClass('box')
.appendTo($('#grid'));
}
Function for updating grid[row2][col2] with the value from grid[row1][col1]:
function merge(row1, col1, row2, col2) {
if (merging[row2][col2]) {
return false;
}
grid[row2][col2].remove();
grid[row2][col2] = grid[row1][col1];
grid[row1][col1] = null;
var number = grid[row2][col2].text() * 2 ;
var color = pikColor(number);
var textcolor = textColor(number);
alert(number);
alert(textcolor);
merging[row2][col2] = true;
grid[row2][col2]
.css({
background: color,
color: textcolor,
top : row2 * 100 + 'px',
left : col2 * 100 + 'px'
})
.text(number);
return true;
}
Thanks in advance!