Rafail Antoniadis Rafail Antoniadis - 1 year ago 68
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 Source

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.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download