Directing animation to correct place
<p>In my word game there is a grid with 3 letter words.</p>

<p>The aim of the game is to spell the words by clicking on the corresponding letters on the side.</p>

<p>When an area in the grid is highlighted it indicates to the user the word to spell. The user clicks the letters on the side of the grid and they should move to the highlighted area.</p>

<p>I have recently changed "drop-box" to a div in the following piece of code and now the animation takes the letter to the top corner of the grid before taking it to the correct position.</p>

<pre><code>    var row = '&lt;tr&gt;';
    var spaceAvailInRow = numLetters;
    while (spaceAvailInRow) {
        var word = getWordToFitIn(spaceAvailInRow, unusedShuffledWords);
        guesses[word] = [];
        spaceAvailInRow -= word.length;

        for (var k = 0; k &lt; word.length; ++k) {
            row += '&lt;td data-letter="' + word[k] + '" data-word="' + word + '"&gt;&lt;div class="drop-box"&gt;&lt;/div&gt;&lt;/td&gt;';
        }
    }
    row += '&lt;/tr&gt;';

    tbl.append(row);
}

$(".container").append(tbl);
</code></pre>

<p>Can someone tell me why the animation has broke now I have changed this?</p>

<p>Fiddle: <a href="http://jsfiddle.net/7Y7A5/27/" rel="nofollow">http://jsfiddle.net/7Y7A5/27/</a></p>
