title: change jquery.animate depending on the value
body: <p>When <code>button.btn</code> is clicked, <code>div.img-box</code> will move with animation.<br>
  I'd like to change the animation depending on the place of <code>div.img-box</code>.<br><br>
  First I click the button, it moves collectly.<br>
  Second I click, the image whose <code>margin-right</code> is now 10px does not move. <br>
  I have this code.</p>
  
  <p>js</p>
  
  <pre><code>$(function(){
      var mr = parseInt($('.img-box').css('margin-right'), 10);
      $(".btn").click(function(){
          if (mr == 10) {
              $(".img-box").animate( { marginRight: '300px' }, 'slow' );
          } else {
              $(".img-box").animate( { marginRight: '10px' }, 'slow' );
          };
      });
  });
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;button class="btn"&gt;&lt;/button&gt;
  &lt;div class="img-box"&gt;&lt;img src="xxx.png"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.img-box{
      float: right;
      width: 250px;
      height: 350px;
      margin: 200px 25%;
  }
  </code></pre>
  
  <p>How do I fix it?</p>