JQuery replace mouse cursor with animated image

Question

I replace the cursor with 2 images with a small distance on this code:

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

Now I want to add an animation -

so that the images move right and left together (the first image on the right and the second on the left, and then the first and second on the right), and this should be all the time.

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

The problem is

if I give it the "left" css property - it no longer follows the mouse movement, but returns all the time to where it was when I installed the animation.

Answer 1

DECISION

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