jquery - 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 插件来防止“意外”鼠标悬停？

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