jquery的取代鼠标光标与动画图像(jquery replace mouse cursor wit

我更换光标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:

解

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);

文章来源: jquery replace mouse cursor with animated image