title: jquery replace mouse cursor with animated image
body: <p>I'm replace the cursor to 2 images with small distance by this code:</p>
  
  <pre><code>$(document).mousemove(function (e) {
          $("#firstImage").css({
              left: e.pageX,
              top: e.pageY
          });
          $("#secondImage").css({
              left: e.pageY + 50,
              top: e.pageY
          });
  });
  </code></pre>
  
  <p>Now I want to add animation - </p>
  
  <p>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.</p>
  
  <pre><code>setInterval(function () {
          $("#first").animate({
              left: "-=100px"
          }, 2000);
          $("#second").animate({
              left: "+=100px"
          }, 2000);
          $("#first").animate({
              left: "+=100px"
          }, 2000);
          $("#second").animate({
              left: "-=100px"
          }, 2000);
      }, 4000);
  </code></pre>
  
  <p>The problem -</p>
  
  <p>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.</p>