Question

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

将鼠标悬停在某个类别上以显示该类别中的图片
点击图片以在全尺寸显示中更改加载
当鼠标在右侧或左侧有屏幕的一侧时，显示的图像列表相应地向左或向右滚动。

第一步和第二步工作正常，但第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
}

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

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

Answer 2

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

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

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

jQuery Animate不支持鼠标移动

2 个答案: