創建從一個地方到另一個地方的路徑動畫

我目前正在創建一個拼寫遊戲，當前爲拖放。遊戲的目的是將字母拖到網格中的相應單詞上。拼寫旁邊的網格中的單詞突出顯示，以向用戶顯示放置字母的位置。創建從一個地方到另一個地方的路徑動畫

的問題是我現在想改變它，所以你點擊字母，他們動畫自己的指定位置

我知道我必須使用JQuery的路徑動畫到做到這一點，但我需要使用座標還是可以做到這一點，所以它鏈接到網格中突出顯示的區域？

這裏是腳本，與拖交易和下降的部分和風格，顯示正確的話，不正確的字和詞來拼寫。

$('#pickNext').click(function() { 
// remove the class from all td's 
$('td').removeClass('spellword'); 
// pick a random word 
rndWord = shuffledWords.sort(function() { 
    return 0.8 - Math.random(); 
})[0]; 
// apply class to all cells containing a letter from that word 
$('td[data-word="' + rndWord + '"]').addClass('spellword'); 
}); 



$('.drag').draggable({ 

helper: 'clone', 
snap: '.drop', 
grid: [60, 60], 
revert: function(droppable) { 
    if (droppable === false) { 
     return true; 
    } 

    else { 

     return false; 
    } 
} 
}); 


$(".drop").droppable({ 
drop: function(event, ui) { 
    word = $(this).data('word'); 

    guesses[word].push($(ui.draggable).attr('data-letter')); 
    console.log($(event)); 
    console.log($(ui.draggable).text()); 

    console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim()); 


    if ($(this).text() == $(ui.draggable).text().trim()) { 

     $(this).addClass('wordglow3'); 
    } else { 
     $(this).addClass('wordglow'); 
    } 
    console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim()); 


    console.log(guesses); 

    if (guesses[word].length == 3) { 
     if (guesses[word].join('') == word) { 
      $('td[data-word=' + word + ']').addClass('wordglow2'); 

     } else { 
      $('td[data-word=' + word + ']').addClass("wordglow4"); 
      guesses[word].splice(0, guesses[word].length); 
     } 
    } 






}, 

activate: function(event, ui) { 
    word = $(this).data('word'); 

    // try to remove the class 
    $('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3'); 
} 


});

來源

2012-07-25 m0onio

願這fiddle幫助你。只需爲移動動畫添加一個css轉換，然後使用jquery在單擊右字母時設置位置...

來源

2012-07-25 15:19:49 cvsguimaraes

是的。您只需將放置事件中的拼寫驗證移動到方形點擊，然後獲取匹配字母的位置並讓css轉換爲您製作動畫。 @ m0onio – cvsguimaraes 2012-07-25 15:49:14

我改變了拼寫驗證，但它仍然不起作用@cvsguimaraes – m0onio 2012-07-25 15:56:17

這是您的代碼結構的巨大變化，有時最好從零開始。祝你好運！ @ m0onio – cvsguimaraes 2012-07-25 16:08:51

創建從一個地方到另一個地方的路徑動畫

回答

相關問題