如何使用left/top重新定位相对定位的DIV？

Question

如何使用left/top重新定位相对定位的DIV？

javascriptjquerycssjquery-animate

3

我有一个带有属性position: relative;的

。现在，有三个这样的

，它们都有唯一的ID等。

现在，如果我点击一个

，我希望它动画到文档中的某个位置。虽然我不能确定左/上值，因为如果我使用“top”和“left”，它会相对于其父元素设置左侧位置。

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

可点击的

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

- Roel

如果我使用“position: absolute”，它会首先将div移动到左上角。 - Roel

尝试将左侧和顶部值相加。 - S L

我不确定问题出在哪里：这段代码没有做你期望它做的事情吗？ - FK82

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

实际上，不是这样的。如果您使用相对定位(position: relative)元素的left和top属性，它们会将其从未定位时（例如在静态流中）的位置偏移，并继续在静态流中保留其空间。这是微妙但重要的区别，对于拖放非常有用。

如果您想将其动画化到文档的左上角，可以通过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"
    });
});

实时示例

同样地，如果你想将它移动到另一个元素所在的位置，只需从另一个元素的位置中减去它的位置即可得到要应用的增量：

$("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