javascript - 如何使用左/上重新定位相对DIV？

Question

我有一个 div，其属性为 position: relative;。现在，有三个这样的 div。他们都有一个唯一的 ID 等。

现在，如果我单击一个 div，我希望它以动画形式显示到文档中的某个位置。虽然我无法确定 left/top 值，因为如果我使用“top”和“left”，它会将左侧相对设置为其父位置。

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

将移动的可点击 DIV 的 CSS。

div#left_hldr .switch_project {
  z-index: 1001;
  position: relative;
  margin: 10px 0px 0px 0px;
  cursor: pointer;
}

// 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

...it will relatively set the left to its parents position.

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

如果你想将它动画化到文档的左上角，你可以计算出它的偏移量(通过 offset )，然后将这些作为负数提供给 left 和 top，因为当然，如果它位于(比如)[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"
    });
});

Live example

类似地，如果您想将它移动到另一个元素所在的位置，只需从另一个元素的位置中减去它的位置——这将为您提供要应用的增量:

$("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"
    });
});

Live example