Move div without animate

Question

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 1

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.

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