Jquery function needs to cancel other functions first

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 mo开发者_如何转开发useover 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.

---

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);
});

---

Yes, you can call the .stop() method to stop any running animations on the matched elements.

http://api.jquery.com/stop/

---

Yes, There is one function in jquery. Try this :

$('#divId').hover(function() {
$(this).find('#img1').stop(true, true).slideUp();
$(this).find('#img2').stop(true, true).slideDown();
}, function() {
$(this).find('#img1').stop(true, true).slideDown();
$(this).find('#img2').stop(true, true).slideUp();
});