Javascript to JQuery Animation
<p>I have been trying to get this animation going for days but I am having no luck so far so I was wondering if anyone can give me some insight on how to change this Javascript function into a JQuery animation function. I really don't know where to start looking to modify it but I figure it has to do with the last 5 lines of the <code>pushDisk</code> function below. The goal of this function is to move a disc onto a tower by animation (<code>JQuery</code>). I copied and pasted the markup below it. </p>

<pre><code>function pushDisk(disk,index){
    var diskWidth = parseInt(disk.style.width);
    var towerLeft = parseInt(document.getElementById("tower"+index).style.left);
    var topDisk = disksOnTowers[index-1][0];
    if (topDisk!=null){
        topDiskWidth = parseInt(topDisk.style.width);
        topDiskTop = parseInt(topDisk.style.top);
        disk.style.left=towerLeft+midhoriztower-diskWidth/2+"px";
        disk.style.top=topDiskTop-diskheight-1+"px";
    }
    else {
        disk.style.left=towerLeft+midhoriztower-diskWidth/2+"px";
        disk.style.top=basetop-diskheight-1+"px";
    }   
}
</code></pre>

HTML markup

<pre><code>&lt;body onload="init();" onselectstart="return false" oncontextmenu="return false"&gt;
&lt;form name="hanoi"&gt;

&lt;div id="title" style="position: absolute; visibility: visible; left: 270px; top: 30px; width: 160px; height: 20px; font: bold 20px Tahoma; text-align: center;"&gt;Tower of Hanoi&lt;/div&gt;

&lt;div id="tower1" class="container" style="left: 30px; top: 80px; width: 200px; height: 200px;" onmousemove="indexTo=1"&gt;
&lt;div id="verttower1" class="towervert" style="left:99px;top:10px;width:3px;height:170px"&gt;&lt;/div&gt;
&lt;div id="horiztower1" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"&gt;&lt;/div&gt;
&lt;div class="tower"&gt;TOWER 1&lt;/div&gt;
&lt;/div&gt;

&lt;div id="tower2" class="container" style="left: 250px; top: 80px; width: 200px; height: 200px;" onmousemove="indexTo=2"&gt;
&lt;div id="verttower2" class="towervert" style="left:99px;top:10px;width:3px;height:170px"&gt;&lt;/div&gt;
&lt;div id="horiztower2" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"&gt;&lt;/div&gt;
&lt;div class="tower"&gt;TOWER 2&lt;/div&gt;
&lt;/div&gt;

&lt;div id="tower3" class="container" style="left: 470px; top: 80px; width: 200px; height: 200px;" onmousemove="indexTo=3"&gt;
&lt;div id="verttower3" class="towervert" style="left:99px;top:10px;width:3px;height:170px"&gt;&lt;/div&gt;
&lt;div id="horiztower3" class="towerhoriz" style="left:0px;top:180px;width:200px;height:2px"&gt;&lt;/div&gt;
&lt;div class="tower"&gt;TOWER 3&lt;/div&gt;
&lt;/div&gt;

&lt;div id="disk1" class="disk" style="left: 545px; top: 100px; width: 50px; height: 19px; background-color: pink; z-index: 8;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 1"&gt;&lt;/div&gt;
&lt;div id="disk2" class="disk" style="left: 535px; top: 120px; width: 70px; height: 19px; background-color: violet; z-index: 7;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 2"&gt;&lt;/div&gt;
&lt;div id="disk3" class="disk" style="left: 525px; top: 140px; width: 90px; height: 19px; background-color: indigo; z-index: 6;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 3"&gt;&lt;/div&gt;
&lt;div id="disk4" class="disk" style="left: 515px; top: 160px; width: 110px; height: 19px; background-color: blue; z-index: 5;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 4"&gt;&lt;/div&gt;
&lt;div id="disk5" class="disk" style="left: 505px; top: 180px; width: 130px; height: 19px; background-color: green; z-index: 4;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 5"&gt;&lt;/div&gt;
&lt;div id="disk6" class="disk" style="left: 495px; top: 200px; width: 150px; height: 19px; background-color: yellow; z-index: 3;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 6"&gt;&lt;/div&gt;
&lt;div id="disk7" class="disk" style="left: 485px; top: 220px; width: 170px; height: 19px; background-color: orange; z-index: 2;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 7"&gt;&lt;/div&gt;
&lt;div id="disk8" class="disk" style="left: 475px; top: 240px; width: 190px; height: 19px; background-color: red; z-index: 1;" onmousedown="initializeDrag(this,event)" onmouseup="dropDisk(this)" title="Disk 8"&gt;&lt;/div&gt;

&lt;div id="settings" class="container" style="left: 220px; top: 310px; width: 260px;"&gt;
&lt;table&gt;
&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;No. of disks&lt;/td&gt;
&lt;td&gt;
&lt;select name="diskno" onchange="newGame(this)" onclick="prevIndex=this.options.selectedIndex"&gt;
&lt;option value="7"&gt;3&lt;/option&gt;
&lt;option value="15"&gt;4&lt;/option&gt;
&lt;option value="31"&gt;5&lt;/option&gt;
&lt;option value="63"&gt;6&lt;/option&gt;
&lt;option value="127"&gt;7&lt;/option&gt;
&lt;option selected="selected" value="255"&gt;8&lt;/option&gt;
&lt;/select&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Minimum no. of moves&amp;nbsp;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;&lt;input name="minmove" style="border: medium none;" size="3" value="255" readonly="readonly"&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Your no. of moves&lt;/td&gt;
&lt;td&gt;&lt;input name="yourmove" style="border: medium none;" size="3" value="255" readonly="readonly"&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan="2" align="center"&gt;
&lt;input name="btnIns" value="Instructions" onclick="displayIns()" type="button"&gt;
&lt;input name="btnRes" value="Restart" onclick="newGame(document.hanoi.diskno)" type="button"&gt;
&lt;input name="btnUndo" value="Undo" onclick="unDo(this)" disabled="disabled" type="button"&gt;
&lt;input name="btnSolve" value="Solve" onclick="solve(this)" type="button"&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>The whole file is located at this jsfiddle link below</p>

<p><a href="http://jsfiddle.net/uqCLb/" rel="nofollow">http://jsfiddle.net/uqCLb/</a></p>
