Animated Reordering divs
Animated Reordering divs
Hi all,
I hope you can help me out. I am stuck for days by (I think) a small problem.
I try to write a small script to reorder divs with an animation. Currently I use the following script:
-
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
div.style { width: 200px; height: 100px; border: 1px solid #000000; margin: 5px; }
</style>
<div id="container">
<div id="someid1" class="style" style="background-color:green;">div1</div>
<div id="someid2" class="style" style="background-color:blue;">div2</div>
<div id="someid3" class="style" style="background-color:red;">div3</div>
<div id="someid4" class="style" style="background-color:purple;">div4</div>
</div>
<p>Pass in a comma separated list of numbers 1-4 to reorder divs</p>
<input id="order" type="text" />
<input id="go" type="button" value="Re-Order" />
<script type="text/javascript">$(function() {
$('#go').click(function() {
var order = $('#order').val() == ""? null: $('#order').val().split(",");
$('#container').reOrder(order, 'someid');
});
});
(function($) {
$.fn.reOrder = function(array, prefix) {
return this.each(function() {
prefix = prefix || "";
if (array) {
for(var i=0; i < array.length; i++)
array[i] = $('#' + prefix + array[i]);
$(this).empty();
for(var i=0; i < array.length; i++)
$(this).append(array[i]);
}
});
}
})(jQuery);
</script>
You can see a working example at:
http://jsbin.com/ihuqo.
What I am trying to achieve is following. Just add a animation effect so the divs 'moves' up and down by using the Animate effect, instead of the immediate reordering.
For example:
if position 1 changes to position 3, the animation will move the div +200px to it's new position.
if position 4 changes to position 1, the animation will move the div -300px to it's new position, etc.
So I only need to integrate the effect in script above, but cannot make it work. Or is this a very difficult method to use?
Someone got a brilliant idea??
Thanks in advance!!