0

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

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

然后单击获取报价按钮旁边的“添加到比较框”。

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

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
4

2 回答 2

1

offset()和CSS 属性之间left有区别。给出与文档相关的位置，并且与父容器相关。topoffset()lefttop

假设目标元素的偏移量是 100 和 150 像素。被设置动画的元素可能从 0 开始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
}, {
   ...
于 2013-03-09T06:34:57.313 回答
0

困难在于您将图像对象插入到其 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
        })
      ;
    })
});

这是jsfiddle 的链接

于 2013-03-09T13:01:07.077 回答