title: element moving out of position with animation
body: <p>I have an element that animates when hovered over, but when it seems to move out of position, when you hover, especially easy to notice after several times. I think it might possibly have something to do with the stop() function, as I am not that familiar with it. </p>
  
  <p>You can view it at <a href="https://jsfiddle.net/ucaw7frL/" rel="nofollow">https://jsfiddle.net/ucaw7frL/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;&lt;li id="home_sensors_li_temp"&gt;&lt;h4&gt;Temperature&lt;/h4&gt;&lt;div class="sensor_border"&gt;&lt;/div&gt;&lt;div class="sensors_icon"&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$('.sensor_border').mouseenter(function(){
      $(this).stop().animate({
          'height':'130px',
          'width':'130px',
          'margin-left':'13px',
          'margin-top':'15px'
      })
  });
  $('.sensor_border').mouseleave(function(){
      $(this).stop().animate({
          'height':'120px',
          'width':'120px',
          'margin-left':'18px',
          'margin-top':'20px'
      })
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {background:blue}
  .sensor_border {border:4px solid #fff; border-radius:50%; height:110px; margin:20px 18px; position:absolute; width:110px;}
  .sensors_icon {height:120px; width:120px;}
  </code></pre>
  
  <p>Why is this element moving out of position, and what am I doing wrong?</p>