how to stop the animation effect in Jquery (the stop method)

[dondavis]

I'm new with Jquery and I'm trying to do an animation, but I can't figure out how to stop the animation.I have 3 images that don't have equal heights or widths in 3 anchor tags, that are stacked in a div.I made a script, when you mouseenter() an image the image's width should grow width 20px, when you mouseleave() the width should get to the previews width.I managed to do this, but when I go over the images with the mouse very fast the start growing and shrinking and the layout gets messy.I found a few plugins that would do what I need but they all use images with equal widths and heights.If anyone could help I would really appreciate it.here is a link with the code http://jsfiddle.net/ClaudiuTicu/9kTft/2/\[code\] var original_w;$('.getBigger').on('mouseenter', function () { original_w = $(this).find('img').width(); //add the width of thye image to the parent original_h = $(this).find('img').height(); //add the height to the parent if ($(this).find('img').is(':animated')) { } else { if ($(this).attr('style')) { } //has the style attribut else { $(this).css({ 'width': original_w, 'height': original_h }); } //dosen't have the style attribut } if ($(this).find('img').width() == original_w) { $(this).find('img').animate({ 'width': original_w + 20 }).addClass('hovered'); } //if the image width is equal with the parent's width else { }}).on('mouseleave', function () { if ($(this).find('img').width() != original_w) { $(this).find('img').animate({ 'width': original_w }).removeClass('hovered'); } console.log(original_w);}); //end mouse leave\[/code\]