Question

The issue that I am having is the I have a div where there are three hidden span tags (used as labels) with jquery I use mouseover function to animate one of those labels.

I am wondering if there is a way to stop/cancel a function that is already running. i.e, if I quickly move to a second mouseover event, the animations seem to queue, meaning when I have moved away there could be animations still occurring.

Ideally, a mouseover event on a new button would kill any currently running animations in there.

Answer 1

Yes: the stop function. This stops the current animation.

If you want to remove all the currently queued elements, you have to pass a first argument of true. If you want to jump to the end of the current animation (generally a good idea) you should pass a second argument of true.

So your call will probably look a bit like this:

$('#someEl').mouseenter(function() {
    $(this)
        .stop(true, true) // stop any currently existing animations 
        .animate({        // and then start a new one
            marginLeft: '20px'
        }, 250);
});