Converting floats to absolute positioning - jquery-animate

Question

I have a monopoly board and I'd like to move a unicode piece around the board smoothly, like with a jQuery.animate method.
Q: Do I have to go to canvas to have a smooth player moving experience, or can I use some sort of absolute positioning instead?
Right now I'm using floats to float the squares that are the board.
window.dom = {} // Document Object Model
var column = 1
var row = 2
function roll() {
return Math.floor(Math.random() * 6) + 1
}
$('#partA .bottomHeader:eq(0)').append('<img src="//Lenoir-Rhyne.com/emoji/hotel.png" width="25">')
$('#partA .bottomHeader:eq(1)').append('<img src="//Lenoir-Rhyne.com/emoji/house.png" width="25">')
;(function() {
var Variables = {}
Variables.die1 = roll()
Variables.die2 = roll()
Variables.die1 = 1000 /* While testing */
Variables.Counter = 0
placePosition()
function MoveMe1() {
$('#Player1').remove()
if (row == 11 && column != 1) {
column = column - 1
} else if (column == 1 && row != 1) {
row = row - 1
} else if (row == 1 && column != 11) {
column = column + 1
} else if (column == 11) {
row = row + 1
}
placePosition()
}
function placePosition() {
if (row == 1) {
$('#partA .property:eq(' + (column-1) + ')').append('<div id="Player1">♛</div>');
} else if (column == 1 && row > 1) {
$('#partB .property:eq(' + (row-2) + ')').append('<div id="Player1">♛</div>');
} else if (column == 11 && row > 1 && row < 11) {
$('#partC .property:eq(' + (row-2) + ')').append('<div id="Player1">♛</div>');
} else if (row == 11 && column > 1) {
$('#partD .property:eq(' + (column-1) + ')').append('<div id="Player1">♛</div>');
}
Variables.Counter += 1
if (Variables.Counter < Variables.die1 + Variables.die2) {
setTimeout(MoveMe1,1000)
}
log(row + ',' + column)
}
})()
#partA .square {
float:left;
}
#partA .property {
height:44px;
}
#partB, #partC {
float:left;
width:9%;
}
#partB .square, #partC .square {
width:100%;
}
#partD {
clear:left;
}
#partD .square {
float:left;
}
#center {
width:81%;
float:left;
}
#SaveArea {
float:left;
width:30%;
margin-left:1%;
margin-top:1em;
}
.form-group {
margin-bottom:0px;
}
.red {
background-color:#ED1B24 /* Change this to ED1B24 */
}
.green {
background-color:#1FB25A /* Change this to 1FB25A */
}
.blue {
background-color:#0072BB /* Change this to 0072BB */
}
.purple {
background-color:#130C5B
}
.lightBlue {
background-color:#AAE0FA
}
.pink {
background-color:#D93A96
}
.orange {
background-color:#F7941D
}
.yellow {
background-color:#FEF200
}
#partA > div, #partB > div, #partC > div, #partD > div {
width:9%;
outline:1px solid black;
height:100px;
font-size:16px;
background-repeat:no-repeat;
background-position:bottom;
}
.bottomHeader {
margin-top:35px;
outline-top:2px solid black;
}
.property:hover {
cursor:pointer;
background-color:#3E3433;
color:white;
}
.bottomHeader:hover, .topHeader:hover, .leftHeader:hover, .rightHeader:hover {
cursor:pointer;
background-color:#3E3433;
color:white;
}
.leftHeader {
height:100px;
width:24px;
float:left;
margin-right:3px;
outline-right:2px solid black;
}
.rightHeader {
height:100px;
width:24px;
float:right;
outline-left:2px solid black;
}
.topHeader {
outline-bottom:2px solid black;
}
.property {
margin-left:3px;
}
.communityChest {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/CommunityChest.jpg);
}
.chance1 {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/Chance1.jpg);
}
.chance2 {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/Chance2.jpg);
}
.chance3 {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/Chance3.jpg);
}
.railroad1 {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/RR1.jpg);
}
.railroad2 {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/RR2.jpg);
}
.railroad3 {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/RR3.jpg);
}
.railroad4 {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/RR4.jpg);
}
.electricCompany {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/Electric.jpg);
}
.waterWorks {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/WaterWorks.jpg);
}
.luxuryTax {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/LuxuryTax.jpg);
}
.jail {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/Jail.jpg);
}
.gotoJail {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/gotoJail.jpg);
}
.GO {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/GO.jpg);
}
.freeParking {
background-image:url(//Lenoir-Rhyne.com/2014Fall2/Monopoly/FreeParking.jpg);
}
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap-theme.css">
<link rel="stylesheet" href="http://lenoir-rhyne.com/2014Fall2/Inc/css/fw.css">
<link rel="stylesheet" href="//lenoir-rhyne.com/2014Fall2/Inc/css/Lenoir-Rhyne.css">
<link rel="stylesheet" href="//lenoir-rhyne.com/2014Fall2/Monopoly/Monopoly.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav navbar-default navbar-fixed-top">
<div class="navbar-inverse">
<div class="container">
<div class="navbar-header"> <a class="navbar-brand glyphicon glyphicon-home" href="/"></a> </div>
<div class="navbar-collapse collapse">
<div class="navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown">
Phillip <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
Profile
</li>
<li class="divider">
</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="msg container label-info"> Change the names of Kentucky, Indiana, Illinois, Atlantic, Ventnor and Marvin Gardens. </div>
</nav>
<main role="main" class="container-fluid">
<div id="partA">
<div class="square freeParking">
<div class="property">FREE PARKING</div>
</div>
<div class="square">
<div class="property">KENTUCKY AVENUE</div>
<div class="bottomHeader red"> </div>
</div>
<div class="square chance2">
<div class="property">CHANCE</div>
</div>
<div class="square">
<div class="property">INDIANA AVENUE</div>
<div class="bottomHeader red"> </div>
</div>
<div class="square">
<div class="property">ILLINOIS AVENUE</div>
<div class="bottomHeader red"> </div>
</div>
<div class="square railroad3">
<div class="property">B & O RAILROAD</div>
</div>
<div class="square">
<div class="property">ATLANTIC AVENUE</div>
<div class="bottomHeader yellow"> </div>
</div>
<div class="square">
<div class="property">VENTNOR AVENUE</div>
<div class="bottomHeader yellow"> </div>
</div>
<div class="square waterWorks">
<div class="property">WATER WORKS</div>
</div>
<div class="square ">
<div class="property">MARVIN GARDENS</div>
<div class="bottomHeader yellow"> </div>
</div>
<div class="square gotoJail">
<div class="property">GO TO JAIL</div>
</div>
</div>
</div>
<div id="partB">
<div class="square"> <span class="rightHeader orange"> </span>
<div class="property">NEW YORK AVENUE</div>
</div>
<div class="square"> <span class="rightHeader orange"> </span>
<div class="property">TENN ESSEE AVENUE</div>
</div>
<div class="square communityChest">
<div class="property">COMMUNITY CHEST</div>
</div>
<div class="square"> <span class="rightHeader orange"> </span>
<div class="property">ST. JAMES PLACE</div>
</div>
<div class="square railroad2">
<div class="property">PENN SYLVANIA RAILROAD</div>
</div>
<div class="square"> <span class="rightHeader pink"> </span>
<div class="property">VIRGINIA AVENUE</div>
</div>
<div class="square"> <span class="rightHeader pink"> </span>
<div class="property">STATES AVENUE</div>
</div>
<div class="square electricCompany">
<div class="property">ELECTRIC COMPANY</div>
</div>
<div class="square"> <span class="rightHeader pink"> </span>
<div class="property">ST. CHARLES PLACE</div>
</div>
</div>
<div id="center"> </div>
<div id="partC"> <!-- right column -->
<div class="square"> <span class="leftHeader green"> </span>
<div class="property">PACIFIC AVENUE</div>
</div>
<div class="square"> <span class="leftHeader green"> </span>
<div class="property">NORTH CAROLINA AVENUE</div>
</div>
<div class="square communityChest">
<div class="property">COMMUNITY CHEST</div>
</div>
<div class="square"> <span class="leftHeader green"> </span>
<div class="property">PENN SYLVANIA AVENUE</div>
</div>
<div class="square railroad4">
<div class="property">SHORT LINE</div>
</div>
<div class="square chance3">
<div class="property">CHANCE</div>
</div>
<div class="square"> <span class="leftHeader blue"> </span>
<div class="property">PARK PLACE</div>
</div>
<div class="square luxuryTax">
<div class="property">LUXURY TAX</div>
</div>
<div class="square"> <span class="leftHeader blue"> </span>
<div class="property">BOARD WALK</div>
</div>
</div>
<div id="partD"> <!-- bottom row -->
<div class="square jail">
<div class="property">JUST VISITING</div>
</div>
<div class="square">
<div class="topHeader lightBlue"> </div>
<div class="property">CONNECTICUT AVENUE</div>
</div>
<div class="square">
<div class="topHeader lightBlue"> </div>
<div class="property">VERMONT AVENUE</div>
</div>
<div class="square chance1">
<div class="property">CHANCE</div>
</div>
<div class="square">
<div class="topHeader lightBlue"> </div>
<div class="property">ORIENTAL AVENUE</div>
</div>
<div class="square railroad1">
<div class="property">READING RAILROAD</div>
</div>
<div class="square">
<div class="property">INCOME TAX</div>
</div>
<div class="square">
<div class="topHeader purple"> </div>
<div class="property">BALTIC AVENUE</div>
</div>
<div class="square communityChest">
<div class="property">COMMUNITY CHEST</div>
</div>
<div class="square">
<div class="topHeader purple"> </div>
<div class="property">MEDITER- RANEAN AVENUE</div>
</div>
<div class="square GO">
<div class="property">GO</div>
</div>
</div>
</main>
<div id="fw-home">/2014Fall2</div>
<div id="AnswerName" hidden>
<div class="square freeParking">
<div class="property">FREE PARKING</div>
</div>
<div class="square">
<div class="property">KENTUCKY AVENUE</div>
<div class="bottomHeader red"> </div>
non breaking space </div>
<div class="square chance2">
<div class="property">CHANCE</div>
</div>
<div class="square">
<div class="property">INDIANA AVENUE</div>
<div class="bottomHeader red"> </div>
</div>
<div class="square">
<div class="property">ILLINOIS AVENUE</div>
<div class="bottomHeader red"> </div>
</div>
<div class="square railroad3">
<div class="property">B & O RAILROAD</div>
</div>
<div class="square">
<div class="property">ATLANTIC AVENUE</div>
<div class="bottomHeader yellow"> </div>
</div>
<div class="square">
<div class="property">VENTNOR AVENUE</div>
<div class="bottomHeader yellow"> </div>
</div>
<div class="square waterWorks">
<div class="property">WATER WORKS</div>
</div>
<div class="square ">
<div class="property">MARVIN GARDENS</div>
<div class="bottomHeader yellow"> </div>
</div>
<div class="square gotoJail">
<div class="property">GO TO JAIL</div>
</div>
</div>
</div>
<script src="//cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.js"></script>

Answer 1

You can use absolute positioning to move the pieces on the board smoothly, however there is a lot of JS involved with updating pieces. You would have to track piece's current location and update x and y coordinates correctly, OR you would have to have movement logic based on every location on the board, meaning every spot had it's own next movement logic.
Using canvas you can create a switch statement for each location:
X number of properties on board
switch(x){
case 1:
piece.moveTo(x, y); // next property position;
break;
case 2:
piece.moveTo(x, y); // next property position;
break;
}
I would advise probably the canvas method and take into account that the movement spacing has to stay relative to the board size.