你可以在jQuery中使用stop函数来做得更好。它会停止正在进行的动画。

function over(event){
    var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

    $(over_id).stop(true, true).fadeIn(400);
    $(over_id).css("display","normal");

}
function out(event) {
    var over_id = '#box_over_' + $(this).attr('id').replace('over_','');

    $(over_id).stop(true, true).fadeOut(400);

}

我只会触发动画（* 特别是如果他们很长 ），如果用户悬停在图像上设置阈值的时间（ 不是在每个翻转 *）。
请参阅实现controlled hover的相关帖子。

与@SliverNinja链接的内容相关，特别是针对您的场景：

function over(event) {
    var $this = $(this);
    $this.data('hoverTimer', setTimeout(function(){
        timer = null;
        var over_id = '#box_over_' + $this.attr('id').replace('over_', '');

        $(over_id).fadeIn(400);
        $(over_id).css("display", "normal");
    }, 200));
}

function out(event) {
    var timer = $(this).data('hoverTimer');

    if (timer !== null) {
        clearTimeout(timer);   
    }
    var over_id = '#box_over_' + $(this).attr('id').replace('over_', '');

    $(over_id).fadeOut(400);
}

小提琴在这里：http://jsfiddle.net/9RR93/

如果你想全力以赴，你可以使用jquery动画为对象建立自己的优先级队列系统，然后每当一个新的动画开始时，你可以检查队列，看看是否有一个现有的动画需要停止（如果其优先级较低），或者如果新的动画不应该开始（由于一个更高优先级的动画已经在队列中运行）。刚刚写了这在过去的10分钟，所以，检查错误哈哈

Animations = {
    active : [],
    remove(anim){
        this.active.splice(this.active.indexOf(anim),1);
    },
    test(){
        this.$testObj1 = $('<div id="animTest" style="position:absolute;left:100;width:20px;height:20px;border:2px solid purple;">hi1</div>');
        this.$testObj2 = $('<div id="animTest" style="position:absolute;left:200;width:20px;height:20px;border:2px solid red;">hi2</div>');
        this.$testObj3 = $('<div id="animTest" style="position:absolute;left:300;width:20px;height:20px;border:2px solid blue;">hi3</div>');
        $('html').append(this.$testObj1).append(this.$testObj2).append(this.$testObj3);
        let testAnim1 = new Animation(
            'one',
            this.$testObj1,
            {top:100},
            1000,
            1 );
        let testAnim2 = new Animation(
            'two',
            this.$testObj2,
            {top:200},
            1000,
            2 );
        let testAnim3 = new Animation(
            'three',
            this.$testObj3,
            {top:300},
            1000,
            3 );
        setTimeout(function(){testAnim3.Animate();},1000) // lowest priority
        setTimeout(function(){testAnim2.Animate();},3000)
        setTimeout(function(){testAnim1.Animate();},2000) // highest priority
        setTimeout(function(){testAnim2.Animate();},6000)
    }
}
class Animation {
    constructor(name,$el,animationList,duration,priority,callback=null){
        this.name = name;
        this.$el = $el;
        this.animationList = animationList;
        this.priority = priority;
        this.duration = duration;
        this.callback = callback;
    }

    Animate(){
        let toRemove = [];
        console.log('animating : '+this.name);
        Animations.active.filter(x => x.priority > this.priority).forEach(x => {
            console.log('toRemPush :'+x.name);
            toRemove.push(x)
        });
        toRemove.forEach(x => {
            console.log('stopping and removing '+x.name+', priority '+x.priority+', due to '+this.name+' with priority '+this.priority);
            x.$el.stop(); 
            Animations.remove(x);
        });
        if (Animations.active.filter(x => x.priority < this.priority).length > 0){
            console.log('fail to start '+this.name+' due to higher priority anims running.');
            return;
        }
        this.$el.animate(
            this.animationList,
            this.duration,
            function(e){
                Animations.remove(this);
                if (this.callback != null && this.callback instanceof Function) {
                    this.callback(e);
                }
            });

       Animations.active.push(this);
    }
}