swap/toggle the clicked "divs" (works), but how to get this animated?
Hi there,
I'll try to explain what I need.
Say we have the following 3 divs:
[1] [2] [3]
When I click div 2 it gets selected, then I click div 1 and they swap getting this:
[2] [1] [3]
The thing is, I want this animated so that the divs slide gently over each other to the new position. But how to do this?
Kind regards,
Some code parts:
- var lastselected = false;
gamearea.selectable({
filter: '.jewel',
selected: function(event, ui){
var s = $(ui.selected);
if ( lastselected && lastselected.neighbor(s) ) {
s.exchange(lastselected);
var m = [], match;
m[0] = connectCheck(s);
m[1] = connectCheck(lastselected);
if ( m[0] || m[1] ) {
grade.resetCombo();
matchHandle(m);
$('.ui-selected').removeClass('ui-selected');
lastselected = false;
return;
} else {
s.exchange(lastselected);
}
}
$('.ui-selected').not(ui.selected).removeClass('ui-selected');
lastselected = s;
},
unselected: function(event, ui) {
if ( $('.ui-selecting').size() == 0)
lastselected = false;
}
});
- jQuery.fn.neighbor = function( another ) {
var thispos = this.getPosition(),
anotpos = another.getPosition(),
displace = {'i': Math.abs( thispos.i - anotpos.i ),
'j': Math.abs( thispos.j - anotpos.j )};
if ( ( displace.i == 1 && displace.j == 0 ) || ( displace.i == 0 && displace.j == 1) )
return true;
return false;
}
jQuery.fn.changeColor = function ( color ) {
return this.css({'background-color': colors[color]}).data('color',color);
}
jQuery.fn.exchange = function ( another ) {
var p = this.parent(),
j,
jcolor = another.data('color');
j = another.replaceWith(this)
p.empty().append(j.data('color', jcolor));
}
jQuery.fn.getPosition = function( ) {
return this.parent().data('position');
}