初投稿はこちら。私が抱えている問題を解決できることを願っています:
ユーザーが各文字をクリックして「正しい」フィールドの最初の空きスペースに挿入することで、シャッフルされた文字から単語を推測する必要があるゲームを書いています。
ここで、文字をクリックすると、新しい場所にアニメーションで移動する必要があります。スパンを使用して文字ごとに個別のフィールドを作成しているため、このスパンを CCS3/JavaScript/JQuery を使用してアニメーション化された方法で新しい場所に移動する方法がわかりませんでした。
コードは JSFiddle にあります: http://jsfiddle.net/Pfsqu/
JS:
var randomNumber = Math.floor(Math.random() * words.length);
var word = words[randomNumber];
var chars = word.split('');
chars=_.shuffle(chars);
for (var i in chars) {
$('#shuffled').append('<span>'+chars[i]+'</span>');
$('#correct').append('<span>');
}
$('#shuffled > span').click(function() {
var letter = $(this);
letter.replaceWith('<span>');
$('#correct > span:empty').first().append( letter ); /* this part needs to be animated*/
CSS:
p > span{
background-color: white;
margin: 10px;
-webkit-border-radius: 15px;
border-radius: 15px;
width: 2.5em;
height: 2.5em;
display: inline-block;
text-align: center;
line-height: 2.5em;
vertical-align: middle;
animation: 1000ms move ease-in-out;
-webkit-animation: 1000ms move ease-in-out;
}