Jquery hover toggle

Hi what i've done is on document.load i've decreased the height of the nav li's and animated up the div below the nav. What i want to do is on hover of each li in the nav is reverse the animate jquery code below:

              $('.tabs li a').animate({
                height: '40'
              }, 1000, function() {
                // Animation complete.
              });

              $('#tabs-wrap').animate({
                marginTop: '-=147'
开发者_C百科              }, 1000, function() {
                // Animation complete.
              });

How would i go about reversing this code but with hover triggers??

Thanks

Something like the following?

$('tabs li a').hover(function(){
  $(this).animate({height:40}, 1000, function(){
      //animation complete
  });
}, function(){
  $(this).animate({height:0}, 1000, function(){
      //animation complete
  });  
});

$('#tabs-wrap').hover(function(){
  $(this).animate({marginTop: '-147'}, 1000, function(){
   //animation complete   
  });

}, function(){
  $(this).animate({marginTop: '147'}, 1000, function(){
   //animation complete
  });

});

Note, additionally with animations like this remember to stop your animation before proceeding with another animation on your element.

Example:

$(this).stop().animate({height:300}), 1000, function(){ });

If I got it right, you are looking for the .hover() function, dont you?