title: jQuery animating along a sine wave
body: <p>I've spent a couple days at this and I give up.</p>
  
  <p>I'm trying to get an object to animate along a sine wave infinitely. It should not end after the first period.</p>
  
  <p><strong>Main Problem:</strong> The cycle ends at approx 1 1/3 Pi rather than just Pi. This extra movement ruins the animation.</p>
  
  <p>I'm stuck here: <a href="http://jsfiddle.net/WPnQG/12/" rel="nofollow noreferrer">http://jsfiddle.net/WPnQG/12/</a>. After each period, it skips about 40 pixels and then continues along its path. This is the problem I can't get past -- the value it ends at and proceeds to restart at are not equal, so the object appears to skip around. Could anyone help a man out? Thanks</p>
  
  <p>I am using the <a href="https://github.com/weepy/jquery.path" rel="nofollow noreferrer">jQuery Path Plugin</a> to perform the path of the animation -- the sine wave in question.</p>
  
  <p><img src="https://i.stack.imgur.com/vD2pY.jpg" alt="enter image description here"></p>
  
  <hr>
  
  <p>Source:</p>
  
  <pre><code>function float(dir){
      var x_current = $("div").offset().left;
      var y_current = $("div").offset().top;
      var SineWave = function() {
          this.css = function(p) {
              var s = Math.sin(Math.abs(p-1)*10);
              if (!dir){// flip the sin wave to continue traversing
                 s = -s;
              }
              var x =  300 -p * 300;
              var y = s * 100 + 150;
              //var o = ((s+2)/4+0.1); //opacity change
              last_x = x;
              // add the current x-position to continue the path, rather than restarting
              return {top: y + "px", left: x_current + x + "px"};
          } 
      };
  
      $("div").stop().animate({
          path: new SineWave
      }, 5000, 'linear', function(){
          // avoid exceeding stack
          setTimeout(function(){float(!dir)}, 0);
      });
  
  }
  </code></pre>