I've implemented a code snippet that replaces the cursor with 2 images placed at a small distance from each other:
$(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 enhance this by adding animation -
making the images move together to the right and left alternately (the first image moves right, the second left, then the first left, and the second right), continuously.
setInterval(function () {
$("#first").animate({
left: "-=100px"
}, 2000);
$("#second").animate({
left: "+=100px"
}, 2000);
$("#first").animate({
left: "+=100px"
}, 2000);
$("#second").animate({
left: "-=100px"
}, 2000);
}, 4000);
The issue arises when I assign the "left" css properties for the animation - the images no longer follow the mouse movement but instead return to their original positions at the start of the animation.