finish an animation and the stop!?

finish an animation and the stop!?

Hi,

I am very new to JQuery and I have a little question.

I have serveral DIV-Containers on my site and I added to each an .mouseenter and .mouseleave event:
  1. $(document).ready(function()
  2. {
  3.     $('div.Menu').mouseenter
  4.     (
  5.         function()
  6.         {
  7.             $(this).children(".NaviHeader").animate({fontSize: 30,left: 50}, 'slow', 'easeOutBack');
  8.             $(this).children(".NaviSubHeader").animate({fontSize: 15,left: 50, top: 30}, 'slow', 'easeOutBack');
  9.         }
  10.     );
  11.     $('div.Menu').mouseleave
  12.     (
  13.         function()
  14.         {
  15.             $(this).children(".NaviHeader").animate({fontSize: 20,left: 0}, 'slow', 'easeOutBack');
  16.             $(this).children(".NaviSubHeader").animate({fontSize: 15,left: 0, top: 20}, 'slow', 'easeOutBack');
  17.         }
  18.     );
  19. });      
It works fine but the problem is, if I move the mouse over and over the DIV-Containers the animations runs, and runs, and runs.
I think, each time I move over the DIV, the animation is going to the Queue and runs that often. I want it to stop after the .mouseleave animation is finished, so that it runs just on time.... do you know what I mean?

Thank for your support!
Alex