title: jQuery: How to change the position of a div, inside of another div then create a glide effect?
body: <p>I currently have a div, and using css to make it in the shape of a red box, with the ID of #box. Just to make it look neat I put #box inside of another div. I would like to know how can I change the position of the #box to somewhere else on screen (lets say top left), then have it glide to the bottom right of the screen.</p>
  
  <pre><code>$(document).ready(function(){
  
  /*Limits for Glide*/
  var top_limit = "10px";
  var left_limit = "10px";
  var right_limit = "600px";
  var bottom_limit = "600px";
  
  /*Glide*/
  $('#glide').click(function(){
      $('#box').css("left",left_limit).css("top",top_limit);
      $('#box').animate({"left": right_limit, "top": bottom_limit},2000);
  });
  
  });
  </code></pre>
  
  <p>As for my divs I have multiple things on my html file but the main ones are these.</p>
  
  <pre><code>.subDiv {
      width: 600px;
      height: 250px;
      margin: 0 auto;
      padding: 10px;
      background-color: #876D52;
      border: 3px solid white;
  }
  #box{
      width: 250px;
      height: 200px;
      background: #FF9933;
      margin: 0 auto;
  }
  </code></pre>