jQuery的定位和动画

Question

所以我有一段代码：

jQuery.fn.center = function(parent) { 
parent = this.parent(); 
this.css({ 
"position": "absolute", 
"top": ((($(parent).height() - this.outerHeight())/2) + $(parent).scrollTop() + "px"), 
"left": ((($(parent).width() - this.outerWidth())/2) + $(parent).scrollLeft() + "px") 
}); 
return this; 
} 

此代码抓住一个元素，并将其移动到父的中心。很好地工作。有几件事情我希望它能够做到它所做的一切。

1. 我需要它浮在该父项的所有其他元素之上。 z指数或多或少。我试图应用z-index，但似乎没有奏效。我不知道，如果我可能做错了，或者如果有更好的方法。

2. 我需要它回到它所处的位置。这种方式的工作方式是块将被定位在页面上（通过CSS），并且当用户点击时，它将它移动到中心正如代码已经在做的那样。有没有什么办法，如果用户点击退出按钮，我可以编程所述按钮将其移回原来的位置？我不知道我是否可以在jQuery中传递变量。

3. 此选项多为美观，并且我不认为有必要，但想它，如果你有一点点额外的时间。我希望块从它的位置滑动到页面的中心，然后返回，而不是在那里弹出。正如我所说，这只是美学，我真的不需要这样的事情发生。

非常感谢任何能够帮助我的人。

Answer 1

我试图实现类似的要求，但它应该具有所需的所有功能。尝试DEMO

我需要它浮在该父项的所有其他元素之上。 Z索引 或多或少。我试图应用z-index，但似乎没有奏效。 我不知道如果我可能已经做错了，或者有更好的 方式。

对于这种情况，我总是在1001或更大的范围内使用z-index。即使在演示中，它也能正常工作。试试这个，让我们知道你是否还没有为你工作。

我需要它搬回到它的位置。这样的工作方式， 是块会被放置在页面上（通过CSS），当 用户点击，它移动它到页面的中心，因为代码是 已经在做。有没有什么办法，如果用户点击退出按钮， 我可以编程所述按钮将其移回原来的位置？ 我不知道我是否可以在jQuery中传递变量。

我使用.data API存储元素的原始位置，并在单击关闭（退出）按钮时将其恢复到原始位置。

此选项更美观，我不认为它是必要的，但 会喜欢它，如果你有一点额外的时间。我希望块 从它的位置滑动到页面的中心，并返回，因为 反对在那里弹出。正如我所说，这只是美学 ，我真的不需要这样的事情发生。

您可以使用.animate而不是CSS，它将在指定的时间内将元素从原始位置超出其目标位置。

Answer 2

为了它漂浮在所有其他元素，你是对的，你需要使用的z-index为，但你需要确保每个元素都被定位，每个元素都有一个z-index的价值，包括父母。家长也需要定位。

为了恢复到原来的位置，您必须抓取当前的left和top偏移量。在你的click事件监听器中，将元素移回原来的位置。

jQuery.fn.center = function(parent) { 
    var oldTop = this.css('top'); 
    var oldLeft = this.css('left'); 
    parent = this.parent(); 
    this.css({ 
    "position": "absolute", 
    "top": ((($(parent).height() - this.outerHeight())/2) + $(parent).scrollTop() + "px"), 
    "left": ((($(parent).width() - this.outerWidth())/2) + $(parent).scrollLeft() + "px") 
    }); 
    this.click(function(e) { 
    this.css('top', oldTop); 
    this.css('left', oldLeft); 
    }); 
    return this; 
} 

为了做动画（而不只是跳转到的位置），您可以动画使用jQuery的left和top值。

this.animate({ 
    'top': ((($(parent).height() - this.outerHeight())/2) + $(parent).scrollTop() + "px"), 
    'left': ((($(parent).width() - this.outerWidth())/2) + $(parent).scrollLeft() + "px") 
}); 

编辑你可能要考虑使用this.offset()。这将返回一个包含方法left和top的对象。

var offset = this.offset(); 
var oldTop = offset.top; 
var oldLeft = offset.left;