Question

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.

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

Here is the code.

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

    });
   });
  });
 });
});

Answer 1

Take a look at http://jsfiddle.net/thewebdes/DqfJ5/

Is that what you were after?

HTML

<ul>
    <li><a href="#" class="buttons">Link 1</a></li>
    <li><a href="#" class="buttons">Link 2</a></li>
    <li><a href="#" class="buttons">Link 3</a></li>
</ul>

CSS

body { font-family: arial, helvetica, sans-serif; }
li { float: left; display: inline; margin: 0 1px 0 0; }
a:link, a:visited { position: relative; display: block; padding: 5px 10px; text-decoration: none; color: #39F; background: #039; border: 1px solid #03C; }
a:hover, a:active { color: #F90; background: #960; border: 1px solid #630; }

JS

$('.buttons').hover(function() {
    $(this).stop(true,true).animate({top: '-=10', paddingBottom: '15px'}, 200);
}, function() {
    $(this).stop(true,true).animate({top: '+=10', paddingBottom: '5px'}, 200);
});

— edit to answer comment —

If you don’t want the text to move:

$('.buttons').hover(function() {
    $(this).stop(true,true).animate({paddingBottom: '15px'}, 200);
}, function() {
    $(this).stop(true,true).animate({paddingBottom: '5px'}, 200);
});

If you do:

$('.buttons').hover(function() {
    $(this).stop(true,true).animate({paddingTop: '15px'}, 200);
}, function() {
    $(this).stop(true,true).animate({paddingTop: '5px'}, 200);
});