jquery mouseover mouseout

Question

$('.rollover').mouseover(function(e){

        e.stopPropagation();

        thisName = $(this).attr('title');

        $('li#'+thisName).show(50, 'swing');

    });


    $('.rollover').mouseout(function(e){

        e.stopPropagation();                    

        thisName = $(this).attr('title');

        $('li#'+thisName).hide(50, 'swing');

    });

我有四张带有'翻转'类的图片，所以当鼠标遍历每张图片时，会显示一个与图片标题共享其id的列表项，当鼠标离开时，列表项被隐藏。

我的问题是图像非常接近，如果鼠标进入和离开太快，它看起来就像列表项闪烁一样。我更喜欢它，以便鼠标移动动画必须在下一个鼠标悬停动画开始之前完成，反之亦然。

我该怎么做？

JS FIDDLE @ http://jsfiddle.net/callumander/XhpuT/

Answer 1

在用户可以查看新内容之前，让每个动画都完整，而不是减慢速度，为什么不使用像Hover Intent plugin这样的东西来防止“意外”鼠标悬停？

Answer 2

尝试使用.queue（未经测试）：

$('.rollover').mouseover(function(e){
    e.stopPropagation();
    thisName = $(this).attr('title');

    // start the showing once any currently running
    // animations are done
    $('li#'+thisName).queue(function() {
        $(this).show(50, 'swing');
        $(this).dequeue();
    });
}).mouseout(function(e){
    e.stopPropagation();                    
    thisName = $(this).attr('title');

    // start the hiding once any currently running
    // animations are done 
    $('li#'+thisName).queue(function() {
        $(this).hide(50, 'swing');
        $(this).dequeue();
    });
});