jQuery Animate 无法处理鼠标移动

Question

我正在制作一个动画图片库，您可以在小提琴here 中使用 jQuery 看到它，它有一些功能：

1. 将鼠标悬停在某个类别上可显示该类别中的图像
2. 单击图像以将其更改为全尺寸显示
3. 当鼠标在屏幕的右侧或左侧时，显示的图像列表会相应地向左或向右滚动。

第 1 步和第 2 步工作正常，但第 3 项动画无法正常工作，这是我第一次在 jQuery 中使用动画，我一直在拔头发.... 谁能看出我哪里出错了?

这是我检测鼠标位置的代码（工作正常），然后相应地对其进行动画处理（不起作用）

    $(document).mousemove(function(e) {  
    var mX = e.pageX;
    var width = $(window).width();
    var buffer = parseInt(width) / 3;
    var rightBuf = width - buffer;
    var leftBuf = rightBuf - buffer;
    if(mX > rightBuf){
        $('.menu-sub').animate({ "left": "-50px" }, "slow" );
    }else if(mX < leftBuf){
        $('.menu-sub').animate({ "left": "50px" }, "slow" );          
    }else{

    }
});

Answer 1

要移动您的图像列表，您可以使用

$('.menu-sub ul').animate({ "margin-left": "-=50px" }, "slow" );

但是你不应该使用.mousemove()，因为每次鼠标移动一个像素时都会调用它。您可以使用隐藏的 div 并绑定 hover，就像对标题所做的那样。在您的 mouseover 事件中，您可以执行类似

的操作

hovering = true;
while (hovering) {
// animate
}

并在您的 mouseout 事件中将 hovering 设置为 false。

我还更新了你的小提琴，至少要等一秒钟才能再次滚动：http://jsfiddle.net/3xkbmo8p/16/

Answer 2

如果你想为你想要的 div 设置动画。左边只会影响位置：绝对的东西。

有 2 种解决方案，将其包装在一个位置：相对 div 或使用边距为 div 设置动画。

$('.menu-sub').animate({ "margin-left": "-50px" }, "slow" );