如何用JQuery.hover和Raphael.animate動畫菜單？

Question

看到這個小提琴：

http://jsfiddle.net/UfP3C/3/

每個列表項包括SVG元素。

我的目標是當用戶懸停列表項目，拉斐爾動畫發生（爲其子svg元素）。

我遇到了以下問題：

• 緩慢移動鼠標時JQuery.hover正常工作。但是，當您快速滑過（和關閉）兩個列表項（橫向）時，svg元素通常會卡在「mouseenter」動畫位置。

我試圖找出如何讓動畫以達到預期效果：當在兩個列表項迅速捕鼠，最終的結果是，SVG元素都在「鼠標離開」的位置。

上面的提琴演示了這個問題（在FireFox 5和Chrome 13中）。

Answer 1

我會建議使用拉斐爾的本地鼠標懸停和鼠標移開 他們迅速對這些事件 你也就能緊緊動畫與關鍵字綁定迴應「這個」

Answer 2

的解決方案請參見本琴：

• http://jsfiddle.net/UfP3C/4/

爲了防止SVG動畫從動畫的mouseenter凍結現在的位置，設置動畫中進出的時間是相同的值：

list_item.hover(function() { 
    my_rectangle.animate({ 
     y: 0 
    }, 400, 'bounce'); 

},function(){ 
    my_rectangle.animate({ 
     y: 200 
    }, 400, 'bounce'); 
}); 

在上面的代碼中，動畫時間是400同時設置動畫的時間相同的值來解決這個問題。

請參閱上面的提琴完整的代碼。

請注意，使用Raphael懸停功能而不是JQuery懸停功能（使用不同的動畫時間）仍然顯示相同的問題並具有相同的解決方案。