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的{{1}}属性设置动画。你的mousemove代码也会激活.dock-container的左边属性，所以最终你的代码正在与鱼眼搏斗。您应该考虑移动代码以设置父级动画（例如.dock-container，或在另一个div中包裹dock并为其设置动画），以便dock动画不会互相争斗。如果您设置了jsFiddle，我们可以尝试修复它。否则，我很难说我的解决方案是否有效。

Answer 2

我认为mousemove事件应放在包装div上 - 同时查看hoverintent插件。

jQuery鱼眼效果+鼠标移动平移

2 个答案: