장소 수정을위한 연출 애니메이션

Question

내 단어 게임에는 3 글자 단어가있는 표가 있습니다.

게임의 목적은 측면에있는 해당 문자를 클릭하여 단어의 철자를 작성하는 것입니다.

그리드의 영역이 강조 표시되면 사용자에게 철자를 나타냅니다. 사용자는 그리드 측면의 글자를 클릭하고 강조 표시된 영역으로 이동해야합니다.

나는 최근에 다음 코드 조각에서 "드롭 상자"를 div로 변경했으며 애니메이션은 올바른 위치로 가져 오기 전에 문자를 격자의 위쪽 모서리로 가져옵니다.

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

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

    tbl.append(row); 
} 

$(".container").append(tbl); 

누군가 내가 애니메이션을 왜 파기했는지 말해 줄 수 있습니까?

바이올린 : http://jsfiddle.net/7Y7A5/27/

Answer 1

문제는 position()이 (오프셋) 부모 요소의 위치를 ​​얻을 수 있다는 것입니다 - 귀하의 경우, 각 drop-box 사업부는이 td를 포함에 0,0 releative에 위치한다. 필요한 것은 td의 position()이고, drop-box의 값은 아닙니다.

내가 조금 주위에 물건을 변경했습니다, 그리고 바이올린 여기에서 볼 수 있습니다 : http://jsfiddle.net/mHDkV/1/

내가 부모 td의 위치를 ​​참조 할 수있는 targetPos 변수를 변경했습니다, 그에게 occupied 클래스를 적용 td도 마찬가지입니다. jsFiddle의 코드를 살펴 보시기 바랍니다.