重叠的jquery mouseover事件

Question

I am writing a card list.
The li elements inside the card list has both mouseenter and mouseleave event.

mouseenterCard: function(index) {
    var nOnRight = index+2;
    var n = index+1;

    if (n!=1) {
        $('#cards-list li:nth-child('+n.toString()+')').animate({'margin-left': '30px'},
                                                                 "fast",
                                                                 function() {

                                                                 });
    }
    $('#cards-list li:nth-child('+nOnRight.toString()+')').animate({'margin-left': '30px'},
                                                                   "fast");
},
mouseleaveCard: function(index) {
    var nOnRight = index+2;
    var n = index+1;
    if (n!=1) {
        $('#cards-list li:nth-child('+n.toString()+')').animate({'margin-left': marginLeft.toString()+'px'},
                                                                 "fast",
                                                                 function() {

                                                                 });
    }
    $('#cards-list li:nth-child('+nOnRight.toString()+')').animate({'margin-left': marginLeft.toString()+'px'},
                                                                   "fast");
}

$('#cards-list').on('mouseenter', 'li' ,function(e){
    CardList.getInstance().mouseenterCard($(this).index());
});

$('#cards-list').on('mouseleave', 'li' ,function(e){
    CardList.getInstance().mouseleaveCard($(this).index());
});

Here is the DEMO
As you swap between two elements quickly, the li elements behave weird.
What is the problem?

Answer 1

The animation gets queued as you move over the same element multiple times. You have to stop the animation with either .stop or .finish (latter ends the animation instantly):

$('#cards-list li:nth-child('+nOnRight.toString()+')').stop().animate(...

Answer 2

You can try debouncing/throttling the events. http://benalman.com/projects/jquery-throttle-debounce-plugin/

If You have running animations, use .stop() on the mouseleave event to break the animation