title: Change DIV position on click and animate jQuery
body: <p>I am trying to move a <code>DIV</code>with animation from center to left, and by default <code>DIV</code> on click in <code>jQuery</code>, where parent div is with <code>position:relative</code>, what I was thinking is, onclick the parent <code>DIV</code> position will be changed from relative to absolute and then run animate function, but it's not working, it's just shifting from center to left on click, no animation.</p>
  
  <p>Here is the code which I am trying:</p>
  
  <pre><code>$("#bx1 &gt; .column-wrapper-inner &gt; a ").click(function(){
      $(".custom-col-md-2").css({position: "absolute"});
      $(".column-wrapper").css({position: "absolute"}).animate({left: '50px'}, "slow");
   });    
  </code></pre>
  
  <p><strong>Note:</strong> I want to change the div position from relative to absolute only on click not by default, as by default elements are in grid.</p>
  
  <p>Can any one please help with this!</p>
  
  <p><strong>UPDATE</strong> : Here is the <a href="https://jsfiddle.net/qyw0du72/1/" rel="nofollow">JsFiddle</a> </p>
  
  <p>Thanks in advance.</p>