jQuery animate() sliding up and down uncontrollably and randomly

Question

I have been working on a script to slide the drawers open and close to show more hidden content. You can see the working script in action here: http://igs.link-networkonline.com/campaign-landing-page/

This is buggin me though... there are a few times when the a "drawer" would bounce (open and close) somewhat uncontrollably, and I would have to click to stop it. It appears to happen randomly...

Has anyone else ever experience this sort of thing with .hover()? I have seen some posted about not using .mouseover but nothing relating to .hover()

Here is my code:

   $(document).ready(function () {

    $(".first").hover(function() {
        $(".first").animate({'height': '257px', 'top': "-183px"});
        $("img.button1").animate({'top': "-205px"});
        $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
        $("body").animate({'padding-bottom': '-300px'});
    }, function() {
        $(".first").animate({'height': '75px', 'top': "-1px", 'overflow': "hidden"});
        $("img.button1").animate({'top': "-25px"});
        $('img.button1').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
    });
   $(".second").hover(function() {
        $(".second").animate({'height': '255px', 'top': "-181px"});
        $("img.button2").animate({'top': "-205px"});
        $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
    }, function() {
        $(".second").animate({'height': '75px', 'top': "-1px"});
        $("img.button2").animate({'top': "-25px"});
        $('img.button2').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
    });
    $(".third").hover(function() {
        $(".third").animate({'height': '230px', 'top': "-156px"});
        $("img.button3").animate({'top': "-180px"});
        $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/downarrow.png');
    }, function() {
        $(".third").animate({'height': '75px', 'top': "-1px"});
        $("img.button3").animate({'top': "-25px"});
        $('img.button3').attr('src','<?php bloginfo('template_directory'); ?>/images/bluebutton.png');
    });

}); 

Answer 1

You want to use stop() http://api.jquery.com/stop/.