jQuery魚眼效果+鼠標移動平移

Question

我正試圖結合鼠標平移效果與魚眼插件http://interface.eyecon.ro/docs/fisheye。

這些做工精細分開，但兩人一起完全痙攣

有沒有什麼可以改變或添加到下面的代碼，一切都順利嗎？

鼠標平移：

$("body").mousemove(function(e) { 
    var distance = e.pageX - $(this).offset().left; 
    var percentage = distance/$(this).width(); 
    var targetX = -Math.round(($(".dock-container").width() - $(this).width()) * percentage); 
    $('.dock-container').animate({left: [targetX+"px", "easeOutSine"]}, { queue:false, duration:2500 }); 
}); 

魚眼：

$('#dock').Fisheye({ 
    maxWidth: 42, 
    items: 'a', 
    itemsText: '', 
    container: '.dock-container', 
    itemWidth: 40, 
    proximity: 90, 
    halign : 'center' 
}); 

Answer 1

如果你看魚眼插件是如何工作的，你會看到它的動畫屬性left的.dock-container。您的鼠標移動代碼還會動畫.dock-container的左側屬性，因此最終您的代碼正在與魚眼對戰。你應該考慮移動你的代碼來爲父項設置動畫（例如dock，或在另一個div中包裝dock併爲其設置動畫效果），以​​便left動畫不會相互爭奪。如果您設置了jsFiddle，我們可能有機會嘗試修復它。否則很難說我的解決方案是否可行。

Answer 2

我認爲mousemove事件應該放在一個包裝div上 - 也可以看看hoverintent插件。