title: Move div without animate
body: <p>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".</p>
  
  <pre><code>$(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)
      &amp;&amp; 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
      &amp;&amp; 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 
      &amp;&amp; (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
      &amp;&amp; transparent_left === this_left){ 
          change_score();
          box.finish().animate({top: "-="+width}, 100);
          transparent.finish().animate({top: "+="+width}, 100, function(){animate_callback(result)});
      }
  });
  </code></pre>