jquery replace mouse cursor with animated image

Question

I'm replace the cursor to 2 images with small distance by 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 animation -

so that the images move right and left together (the first image right and the second - left, and after that the first left and the second right), and it need to 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 -

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

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