Question

我一直在尝试沿着直线制作图像移动动画，但是惨遭失败:)它完全走错了方向，我无法弄清楚为什么......

请访问：http://kpi.ge/ultrasound-systems/philips-hdi5000/

然后点击get-quote按钮旁边的“添加到比较框”。

动画从那里开始，应该直接到比较框所在的左边......但是它会下降而不是出现在正确的位置。我很确定父偏移是不正确的，但据我所知偏移与文档窗口有关，所以结果让我感到困惑......

jquery的：

var product_img = data;
var fdest_pos = $("#compareproducts").offset();


if (!$("#compareleft").has(".compareprodimg").length && !$(".compareboxbtn").has(".compareprodimg").length) {
    $("#clickedthis").append(product_img);
    $("#clickedthis").removeAttr("id");
    $(".compareboxbtn").children(".compareprodimg").css({
        position: "absolute"
    }).animate({
        left: fdest_pos.left,
        top: fdest_pos.top
    }, {
        complete: function () {

            $(this).removeAttr("style");
            $(this).appendTo("#compareleft");
            $("#compareleft").attr("class", "on");
            $("#compareleft").attr("href", get_param_url);

            //save to session
            $.session.set("compareLeftContent", product_img);
            $.session.set("compareLeftId", get_param_url);


            // if href is numeric turn on compare now button
            if ($("#compareleft").attr("href") > 0 && $("#compareright").attr("href") > 0) {

                $("#compareproducts .button").removeClass("off");
                $("#compareproducts .button").addClass("on");
                $("#compareproducts .button.on").on("click", function () {
                    window.location = "/kpi/compare/?product=" + $("#compareleft").attr("href") + "," + $("#compareright").attr("href");
                });

                $(".button.on").unbind("mouseenter mouseleave"); //Remove helper pop-up "add another product"


            } // if

        }
    });
} // if left

Answer 1

offset()与left和top CSS属性之间存在差异。 offset()提供与文档相关的位置，left和top与父容器相关。

假设目标元素的偏移量为100和150像素。正在设置动画的元素可能以left和top为零，因此当您使用目标偏移动画它们时，该元素会向左移动100像素，向下移动150像素。（你可以在网页上看到它：如果你看一下动画片的动作并想象它从页面的左上角开始，它就会到达正确的位置。）

您需要计算两个元素的偏移量之间的差异，并按该量计算动画。像这样：

var product_pos = $(".compareboxbtn").children(".compareprodimg").offset();
var newLeft = fdest_pos.left - product_pos.left;
var newTop = fdest_pos.top - product_pos.top;

$(".compareboxbtn").children(".compareprodimg").css({
    position: "absolute"
}).animate({
    left: newLeft,
    top: newTop
}, {
   ...

Answer 2

难点在于您将图像对象插入到offsetParent为正文的不同DOM节点中。在动画之前，您的对象包含在具有多个嵌套的offsetParents的DOM节点中。

这意味着在移动之前，您必须获取元素当前的总偏移量，并从那里开始动画。以下是一个更通用的解决方案，因为它适用于图像，无论它们嵌套在DOM中的哪个位置：

relativeOffsetParent = function() {
    var $ctx = $(this);
    var $op = $ctx.offsetParent();
    if ($ctx.is($op) || $op.css("position") === "relative") {
        return $op;
    } else {
        return relativeOffsetParent.call($op);
    }
};

recursiveOffset = function() {
    var $ctx = $(this);
    var offset = $ctx.offset();
    var $op = relativeOffsetParent($ctx);
    if ($ctx.is($op) || $op[0].tagName.match(/BODY|body/)? true : false) {
        return offset;
    } else {
        var pOffset = recursiveOffset.call($op);
    return {
        left: pOffset.left + offset.left,
        top: pOffset.top + offset.top
    };
  }
};


var fdest_pos = $("#compareleft").offset();

$(".compareboxbtn").click(function() {
    $(this).find(".compareprodimg").each(function(){
      var o = recursiveOffset.call($(this));
      $(this)
        .removeAttr("style")
        .appendTo("#compareleft")
        .css({
            zIndex:9999,
            position: "absolute",
            left: o.left,
            top: o.top
        })
        .animate({
            left: fdest_pos.left,
            top: fdest_pos.top
        })
      ;
    })
});

这是link to jsfiddle

jquery使用偏移量将图像从一个地方移动到另一个地方，从而产生堰效果

2 个答案: