jQuery / CSS - 使用left / top重新定位相对DIV
我有一个属性为“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;
}
// 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");
});
});
});
没有找到相关结果
已邀请:
1 个回复
完趣镐
和和元素，它们会将它偏离它未定位的位置（例如，在静态流中），同时继续在静态流中保留其空间。一个微妙但重要的区别（对于拖放非常有用）。 如果你想将它设置为文档左上角的动画，你可以计算出它的偏移（通过），然后将它们作为和的负数提供，因为当然它是在（例如）[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" }); });