Receding and Protruding menu tabs Jquery
<p>Sorry if this is a silly question but I have been on web design for 2 weeks and I am trying to make some menu tabs. Specificity ones that protrude when you mouseover and recede back to start position when mouseleave. I have made some code but it seems to act strangely.
When I mouse over its fine and the tab comes down 10px but when I leave the second time on any tab it recedes 10px then another 10px and it adds up each time incrementally, 20, 30, 40 etc.</p>

<p>I have tried popping in a stop even propergation but I am still learning. If its messy let me know.</p>

<p>Here is the code.</p>

<pre><code>$(document).ready(function(){
 $('.buttons').mouseover(function(){
  $(this).animate({top: '+=10'}, 200, function() {
   $(this).mouseleave(function(){
    $(this).animate({top: '+=-10'}, 200, function() {

    });
   });
  });
 });
});
</code></pre>
