How to prevent mouse enter/leave to occur too many times

Question

I have a piece of code that basically says: if you roll over this , then the other thing appears and if you roll out then it will disappear.

The problem is that if I take the mouse and roll over/out too many times then the elements appears/disappears too many times (because I have created a lot of events for it by mistake)

my code looks like this:

$('div.accordionContent').mouseenter(function()
{
    $(this).find(".something").animate({left: 0}, 300)}).mouseleave(function() {
    $(this).find(".something").animate({
    left: -200}, 500);;
}); 

How do I tell it to avoid multiple hovering?

I use jQuery 1.4.3 if that helps..

Answer 1

Rather than avoiding multiple triggering, try stopping the animation before starting another.

$('div.accordionContent').mouseenter(function() {
    $(this).find(".something").stop().animate(...)
});