Question

var Y = 0.2; // Motion step
var X = 0.6;

(function go(){

  $('#m').animate({
    left: '+='+(X) ,
    top:  '+='+(Y)     
  }, 30, 'linear', go);

}());

Move an element diagonally but not under 45° (Y=1, X=1), rather by steps of a floated number.
Mozilla plays well, but all other browser won’t move an element by a decimal px value.

What approach would you use?

Answer 1

Instead of trying to do it through recursion, why not set the left and top values as integers and do it in one animate() call. This way you don’t have to deal with floating point numbers and it should still animate diagonally.

var Y = 20; // cannot be >1
var X = 60; // cannot be >1

    function go(){

      $('#m').animate({
        left: '+='+(X) ,
        top:  '+='+(Y)     
      }, 300, 'linear');

    }
    go();