jquery用动画图像替换鼠标光标

Question

我用这段代码将光标替换为距离较远的2幅图像：

$(document).mousemove(function (e) {
        $("#firstImage").css({
            left: e.pageX,
            top: e.pageY
        });
        $("#secondImage").css({
            left: e.pageY + 50,
            top: e.pageY
        });
});

现在我要添加动画 -

使图像一起左右移动（第一个图像右侧和第二个 - 左侧，之后是第一个左侧和第二个右侧），它需要一直是。

setInterval(function () {
        $("#first").animate({
            left: "-=100px"
        }, 2000);
        $("#second").animate({
            left: "+=100px"
        }, 2000);
        $("#first").animate({
            left: "+=100px"
        }, 2000);
        $("#second").animate({
            left: "-=100px"
        }, 2000);
    }, 4000);

问题 -

如果我给它“左”css属性 - 它不再跟随鼠标移动，而是返回所有时间到我设置动画时的位置。

Answer 1

SOLUTION

HTML

<div id="mousemove">
  <img id="first" src="http://xxx.png">
  <img id="second" src="http://xxx.png">
</div>

CSS

#mousemove {
  position: absolute
}
#first, #second {
  position: relative
}

JS

$(document).mousemove(function (e){
  $("#mousemove").css({
    left: e.pageX,
    top: e.pageY
  });
});

setInterval(function () {
  $("#first").animate({
    left: "-=100px"
  }, 2000);
  $("#second").animate({
    left: "+=100px"
  }, 2000);
}, 2000);