title: Stick the bar always to footer even while animating
body: <p>Recently here, I asked a question to stick a <code>bar</code> element always to bottom-left of the container. It seems not possible using just css. So, I ended up using javascript. Here is the <a href="http://jsfiddle.net/yet0xgat/11/" rel="nofollow noreferrer"><strong>Working</strong> Fiddle</a></p>
  
  <p>Giving highlights of the previous question:</p>
  
  <ul>
  <li>Stick the bar element to bottom-left of the container</li>
  <li>The bar should be in bottom-left, even the container is scrolled vertically or horizontally.</li>
  <li>The bar should come over the horizontal scrollbar, if the horizontal scrollbar is present.</li>
  </ul>
  
  <p>The above fiddle works fine and obeys all above cases, even when the window is resized.</p>
  
  <p>Now, I have the same situation but the container will get resized because of animation button click but not window resize. </p>
  
  <p>Since, I am animating for one second, I am calling the same code present in the window resize function while I clicked on the animating button. But doing so is somehow breaking and isn't following the above rules/requirements.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/yet0xgat/22/" rel="nofollow noreferrer">Fiddle</a>. (<em>not working</em>)</p>
  
  <p>Please help.</p>
  
  <p>PS: Here is the link to <a href="https://stackoverflow.com/q/31308946/1577396">previous question</a>. (<em>if someone wants brief understanding</em>)</p>