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