jQuery / CSS - Позиционирование относительного DIV, используя left / top

Question

У меня есть DIV с атрибутом «Позиция: относительный;». Теперь есть три из этих DIV. Все они получают уникальный идентификатор и т. Д.

Теперь, если я щелкну по DIV, я хочу, чтобы он анимировался в определенной позиции в документе. Хотя я не могу определить значения left / top, так как, если я использую «top» и «left», он будет относительно устанавливать левое положение своих родителей.

Может быть, немного неясно, но вот что я получил.

CSS кликабельного DIV, который будет двигаться.

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 и * 1014. *, поскольку, конечно, если он равен (скажем) [100,50], то его позиционирование в [-100, -50] по сравнению с положением по умолчанию будет ... помещать его в [0,0].

Как это:

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

Живой пример

Точно так же, если вы хотите переместить его туда, где находится другой элемент, просто вычтите его позицию из позиции другого элемента & mdash; это дает вам дельту для применения:

$("selector_for_your_divs").click(function() {
    var mypos, otherpos, $this;

    // Move to the target element
    $this = $(this);
    pos = $this.offset();
    otherpos = $('selector_for_other_element').offset();
    pos.left = otherpos.left - pos.left;
    pos.top  = otherpos.top  - pos.top;
    $this.animate({
        left: pos.left + "px",
        top:  pos.top  + "px"
    });
});

Живой пример