Question

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

(function go(){

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

}());

沿对角线移动元素但不低于45°（Y = 1，X = 1），而不是浮动数字的步长。
Mozilla播放效果很好，但所有其他浏览器都不会按小数 px 值移动元素。

你会用什么方法？

Answer 1

不是试图通过递归来实现，而是为什么不将left和top值设置为整数并在一个animate（）调用中执行。这样您就不必处理浮点数，它仍然应该对角线动画。

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

    function go(){

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

    }
    go();

Answer 2

根据定义，像素是在当前屏幕分辨率下可以显示（或不显示）的最小元素。你可以使用％，我相信它可以跨浏览器工作，例如宽度：45.5％，但像素没有。另外，你甚至可能都没有注意到那么小的运动。

Answer 3

问题在于，当您设置左侧和顶部时，它们会变为像素。你看到45度运动，因为X和Y都被四舍五入为1.

为什么不递增两个JS变量（可以存储浮点数），然后在适当的时候将left和top设置为等于它们（因此舍入将发生在总和而不是增量上）？

var Y = 0.2; // cannot be >1
var X = 0.6; // cannot be >1

var cur_left = $('#m').left;
var cur_top = $('#m').top;

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

按十进制值设置动画

3 个答案: