最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to reposition a relative DIV using lefttop? - Stack Overflow

programmeradmin5浏览0评论

I have a div with the attribute position: relative;. Now, there are three of these divs. They all get a unique ID etc.

Now if I click a div, I want it to animate to a certain position in the document. Although I cannot determine the left/top values since if I use "top" and "left", it will relatively set the left to its parents position.

Maybe a bit unclear, but here is what I got.

The CSS of the clickable DIV that will move.

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

I have a div with the attribute position: relative;. Now, there are three of these divs. They all get a unique ID etc.

Now if I click a div, I want it to animate to a certain position in the document. Although I cannot determine the left/top values since if I use "top" and "left", it will relatively set the left to its parents position.

Maybe a bit unclear, but here is what I got.

The CSS of the clickable DIV that will move.

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");
    });
  });
});
Share Improve this question edited Sep 11, 2019 at 17:44 double-beep 5,51919 gold badges40 silver badges49 bronze badges asked Mar 13, 2011 at 8:11 RoelRoel 1,4724 gold badges20 silver badges31 bronze badges 3
  • If I use "position: absolute", it first moves the div to the left upper corner. – Roel Commented Mar 13, 2011 at 8:18
  • try to add left and top values with it – S L Commented Mar 13, 2011 at 8:21
  • I'm not sure what the problem is: what does this code not do that you expect it to? – FK82 Commented Mar 13, 2011 at 8:39
Add a ment  | 

1 Answer 1

Reset to default 5

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

Actually, no. If you use left and top with a position: relative element, they'll offset it from where it otherwise would be if it weren't positioned (e.g., in the static flow), while continuing to reserve its space in the static flow. A subtle but important distinction (and hugely useful for drag-and-drop).

If you want to animate it to the top left of the document, you can figure out its offset (via offset), and then provide those as negative numbers for left and top, since of course if it's at (say) [100,50], then positioning it at [-100,-50] pared to its default position will...put it at [0,0].

Like this:

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

Similarly, if you want to move it to be where another element is, simply subtract its position from the other element's position — that gives you the delta to apply:

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

发布评论

评论列表(0)

  1. 暂无评论