Rafail Antoniadis Rafail Antoniadis - 5 days ago 5
HTML Question

Move div without animate

The following code it works perfectly, but I want to change .animate effect with something more efficient. I don't want css' transition but something that move divs without showing movement. I need to do it "instantly".

$(document).on("click",".box",function(){
var transparent = $(".transparent");
var transparent_left = transparent.offset().left;
var transparent_top = transparent.offset().top;
var box = $(this);
var width = parseInt(box.outerWidth());
var this_top = box.offset().top;
var this_left = box.offset().left;
var result;

if(transparent_top === (this_top + width)
&& transparent_left === this_left){
change_score();
box.finish().animate({top: "+="+width}, 100);
transparent.finish().animate({top: "-="+width}, 100, function(){animate_callback(result)});
}else if(transparent_top === this_top
&& transparent_left === (this_left + width)){
change_score();
box.finish().animate({left: "+="+width}, 100);
transparent.finish().animate({left: "-="+width}, 100, function(){animate_callback(result)});
}else if(transparent_top === this_top
&& (transparent_left + width) === this_left){
change_score();
box.finish().animate({left: "-="+width}, 100);
transparent.finish().animate({left: "+="+width}, 100, function(){animate_callback(result)});
}else if((transparent_top + width) === this_top
&& transparent_left === this_left){
change_score();
box.finish().animate({top: "-="+width}, 100);
transparent.finish().animate({top: "+="+width}, 100, function(){animate_callback(result)});
}
});

Answer

If you don't want to use transfer or animation the ways are remained is:

Set your div

position: absolute;

and change top, left, right, bottom of your div by javascript.

  1. If you don't want position absolute you can change the location of div by changing it's margins.
Comments