JS/CSS: Moving span in an animated way

Question

First post here. Hope you can help me out with a problem I'm having:

I am writing a game, where a user needs to guess a word from shuffled letters by clicking on each letter to insert it in the first empty space of a "correct" field.

Now, when a letter is clicked, it needs to move to its new spot in an animated way. As I'm using span to create a separate field for each letter I couldn't figure out how to make this span move to its new location in an animated way using CCS3/JavaScript/JQuery.

The code is in JSFiddle here: 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;
 }

Answer 1

I think that it is quite difficult to animate the items the way that you are intending.

The way I would solve it would be keeping the same DOM element, and changing its properties.

For instance, see this

demo

The HTML is

<div class="solution">
    <span class="q q4">W</span>
    <span class="q q2">O</span>
    <span class="q q3">R</span>
    <span class="q q1">D</span>
</div>

I have set the letters of WORD in order, and then I have set to them one of the classes q1 to q4. This class will set the span to a specific position on screen.

This is achieved in this CSS (and also the position for the "solved" status

.solution {
  margin-top: 100px;
  -webkit-transition: all 5s;
  position: relative;
}

.solution span {
  border: solid 1px green;
  padding: 10px;
  margin-top: 80px;
  -webkit-transition: all 2s;
  position: absolute;
  background-color: lightgreen;
  font-size: 30px;
}


.solution span:nth-child(1) {
  -webkit-transform: translate(0px, 0px) rotate(0deg);
}
.solution span:nth-child(2) {
  -webkit-transform: translate(80px, 0px) rotate(0deg);
}
.solution span:nth-child(3) {
  -webkit-transform: translate(160px, 0px) rotate(0deg);
}
.solution span:nth-child(4) {
  -webkit-transform: translate(240px, 0px) rotate(0deg);
}
div.solution span.q {
  background-color: yellow !important;
  border: solid 1px red;
  border-radius: 50%;
 
}
.solution .q.q1 {
  -webkit-transform: translate(0px, -100px) rotate(360deg);
}
.solution .q.q2 {
  -webkit-transform: translate(80px, -100px) rotate(360deg);
}
.solution .q.q3 {
  -webkit-transform: translate(160px, -100px)  rotate(360deg);
}
.solution .q.q4 {
  -webkit-transform: translate(240px, -100px)  rotate(360deg);
}

Now the jQuery is very easy

$('.q').click(function(){
    $(this).removeClass('q');
});

I have used the webkit prefixes, but you can easily set it to work for others browsers

Edited answer:

Changing the nth-child styles to:

.answer1 {
  -webkit-transform: translate(0px, 0px) rotate(0deg);
}
.answer2 {
  -webkit-transform: translate(80px, 0px) rotate(0deg);
}
.answer3 {
  -webkit-transform: translate(160px, 0px) rotate(0deg);
}
.answer4 {
  -webkit-transform: translate(240px, 0px) rotate(0deg);
}

and the script to:

var element = 1;

$('.q').click(function(){
    $(this).removeClass('q').addClass("answer" + element);
    element = element + 1;
});

You got, as per your request, that the letters go to the first available place.

The only remining task is to construct the spans from the array of letters. I think that you have already some code that does quite a similar job; it's only a matter of adapting it.

updated demo