title: jQuery animation don't work after two clicks
body: <p>I was trying working on animation through jQuery and I faced a problem that the div box work for only 2 clicks. Any kind of help is appreciated.
  Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#one").click(function() {
      $("div").animate({
        top: '250px'
      });
    });
  
    $("#sec").click(function() {
      $("div").animate({
        bottom: '250px'
      });
    });
  
    $("#thi").click(function() {
      $("div").animate({
        right: '250px'
      });
    });
  
    $("#for").click(function() {
      $("div").animate({
        left: '250px'
      });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
    background: grey;
    height: 20px;
    width: 20px;
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;button id="one"&gt;DOWN&lt;/button&gt;
  &lt;button id="sec"&gt;TOP&lt;/button&gt;
  &lt;button id="thi"&gt;LEFT&lt;/button&gt;
  &lt;button id="for"&gt;RIGHT&lt;/button&gt;
  
  &lt;br&gt;&lt;br&gt;
  &lt;div class="box"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my code link: <a href="https://jsfiddle.net/djmayank/mcutmbcy/1/" rel="nofollow noreferrer">https://jsfiddle.net/djmayank/mcutmbcy/1/</a></p>