Question

在jquery中，animate函数具有以下代码。 newleft变量包含添加后的值不正确。不确定我是否采取正确的方式。

  step: function( now, fx ) {

    if(fx.prop==="left") {
       var newleft= $("p").offset().left+ now;
     }
     $("p").css("left",newleft)
   }

Answer 1

now将永远是该属性的绝对值，它与上一步的不相对。
这意味着您必须从now元素的原始位置减去p，而不是其当前位置：

$("button").click(function () {
    var a = $("p").offset().left; // get original position

    $("div").animate({left: '-200px'}, {
        step: function (now, fx) {

            if (fx.prop === "left") {
                var b = now;
                var newleft = a + b;
                $("body").append("<div>" + a + "::::::" + b + "------" + newleft + "</div>");
                $("p").css("left", newleft + "px");
            }

        }
    });
});

http://jsfiddle.net/hLYJD/1/

这仅适用，因为div位于0。如果位置不同，则必须先从div减去now的原始位置，以获得相对移动：

$("button").click(function () {
    var a = $("p").offset().left;
    var b = $("div").offset().left;

    $("div").animate({left: '-200px'}, {
        step: function (now, fx) { 
            if (fx.prop === "left") {
                var newleft = a + (now - b);
                $("p").css("left", newleft + "px");
            }
        }
    });
});

http://jsfiddle.net/hLYJD/2/

但是，如果你想做的就是将两个元素移动相同的相对数量，那么只需使用-=200作为动画值：

$("button").click(function () {
    $("div, p").animate({left: '-=200'});
});

Answer 2

尝试在px变量中添加newleft：

var newleft= $("p").offset().left+ now + "px";

当您设置段落的px值时

或附加left：

$("p").css("left",newleft + "px")

关于jquery浮点计算

2 个答案: