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

    }); 

我有四张图片，里面有'rollover'类，所以当鼠标移过每张图片时，会显示一个与图片标题共享其id的列表项，当鼠标离开列表时项目被隐藏。

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

我该怎么做？

JS FIDDLE @使用.queue（未经测试）http://jsfiddle.net/callumander/XhpuT/

Answer 1

而不是慢下来的东西通过使每一个动画完成您的用户才能查看新内容时，为什么不使用类似Hover Intent plugin的东西来防止“意外”鼠标移动？

Answer 2

尝试：

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