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

とCSSプロパティには違いがありoffset()ます。ドキュメントに関連する場所を示し、は親コンテナに関連します。lefttopoffset()lefttop

ターゲット要素のオフセットが100ピクセルと150ピクセルであるとしましょう。アニメーション化されている要素は、おそらくゼロで始まりleft、top両方ともゼロであるため、ターゲットオフセットを使用してアニメーション化すると、要素は左に100ピクセル、下に150ピクセル移動します。（Webページで確認できます。アニメーションの動きを見て、ページの左上から開始することを想像すると、正しい場所に到達します。）

両方の要素のオフセットの差を計算し、その量だけアニメーション化する必要があります。このようなもの：

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 に答える