创建从一个地方到另一个地方的路径动画

我目前正在创建一个拼写游戏，当前为拖放。游戏的目的是将字母拖到网格中的相应单词上。拼写旁边的网格中的单词突出显示，以向用户显示放置字母的位置。创建从一个地方到另一个地方的路径动画

的问题是我现在想改变它，所以你点击字母，他们动画自己的指定位置

我知道我必须使用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

创建从一个地方到另一个地方的路径动画

回答

相关问题