Question

我有一个属性为“Position：relative;”的DIV。现在，这些DIV中有三个。他们都获得了一个独特的ID等。

现在，如果我点击DIV，我希望它能够动画到文档中的某个位置。虽然我无法确定左/上值，因为如果我使用“top”和“left”，它会相对将左侧设置为其父级位置。

可能有点不清楚，但这就是我得到的。

将移动的可点击DIV的CSS。

div#left_hldr .switch_project {
    z-index: 1001;

    position: relative;

    margin: 10px 0px 0px 0px;

    cursor: pointer;    
}

现在，我现在得到的jQuery代码。

// Open project.
$(".switch_project").live('click', function () {

    // Get the ID value.
    var More_Id = $(this).attr("id");

    // Explode the Id.
    var Id_Split = More_Id.split("_");

    // Get the project ID.
    var Project_Id = Id_Split[2];

    /*
        Replacement of the switch project div.

        1 ) Define the current position.

        2 ) Define the new position.

        3 ) Replace the DIV to the new position.

        4 ) Fade the new page in.

        5 ) Put the DIV back to its original position.
    */

    // Current Position.
    var Ori_Left = $(this).offset().left;

    var Ori_Top = $(this).offset().top;

    // New Position.    [ Based on the content_hldr container ]
    var New_Top = $("div#content_hldr").offset().top;

    var New_Left = $("div#content_hldr").offset().left;

    // Define the current div.
    var Div_Rep = $(this);

    // Hide the More Info tab.
    $(Div_Rep).children(".more_info").fadeOut("fast");

    // Fade content out.
    $("div#content_hldr").fadeOut("fast");

    // Replace the div.
    $(Div_Rep).animate({
        top: New_Top,
        left: New_Left
    }, "slow", function () {

        // Load Home page in.
        $("div#content_hldr").load("content/content.projects.php?id=" + Project_Id, function () {

            // Re-define Cufon.
            Cufon.replace('h2');

        });

        // Fade in the content.
        $("div#content_hldr").fadeIn("fast", function () {

            // Hide the replaced div.
            $(Div_Rep).hide();

            // Replace it back to its position.
            $(Div_Rep).css({
                top: Ori_Top,
                left: Ori_Left
            });

            // Show the More Info tab again.
            $(Div_Rep).children(".more_info").show();

            // Fade back in.
            $(Div_Rep).fadeIn("medium");

        });

    });

});

Answer 1

......它会将左侧相对设置为父母的位置。

实际上，没有。如果您将left和top与position: relative元素一起使用，它们会将其从未定位的位置（例如，在静态流程中）偏移，而继续在静态流动中保留其空间。一个微妙但重要的区别（对于拖放非常有用）。

如果要将其设置为文档左上角的动画，可以计算其偏移量（通过offset），然后将其作为left和{{1}的负数提供当然，如果它在（例如）[100,50]，那么将它定位在[-100，-50]与其默认位置相比将......置于[0,0]。

像这样：

top

Live example

同样，如果你想将它移动到另一个元素的位置，只需从另一个元素的位置减去它的位置 - 这样就可以应用增量：

$("selector_for_your_divs").click(function() {
    var pos, $this;
    $this = $(this);
    pos = $this.offset();
    $this.animate({
        left: "-" + pos.left + "px",
        top:  "-" + pos.top  + "px"
    });
});

Live example

jQuery / CSS - 使用left / top重新定位相对DIV

1 个答案: