Question

I try to create a simple HTML-taskboard, some columns and some tasks, with server-side-events that will move a task from one column to another. With jQuery, removing and adding elements is easy but I want an effect (animation) to show the task is moving from column A to column B.

HTML is very simple, just a view div’s:

<div id="colA" class="column">
    <div id="task1" class="task">Task 1</div>
</div>
<div id="colB" class="column">
     <!-- move task1 here -->
</div>

And a JavaScript function called by server-side-event:

function moveTask(taskId, fromId, toId) {
    // move #task1 from #colA to #colB with a nice animation
}

Using jquery-1.8.3 and jquery-1.9.2 but I’m not limited to that, could use other libraries too.

Answer 1

You could do something simple like this:

http://jsfiddle.net/Nd6dc/

var $bCol = $('#colB'),
    bLeft = $bCol.position().left;

var time = 0;

$('.task').each(function () {
  var _this = $(this);

  setTimeout(function () {
    _this.animate({ left: bLeft });
  }, (time));

  time = time + 200;
});