如何将整个div元素向上移动x像素？

Question

我想将整个div及其内容向上重新定位约10-15个像素。

我该怎么做？

注意：这是一个滑块元素，所以当我点击按钮时，滑块会向下滑动。一旦滑块完成后，我想将其向上重新定位约15个像素。

- codecompleting

---

你应该说明它当前是否具有任何定位CSS。这样你就可以通过JavaScript进行修改。 - Eran Zimmerman Gonen

你考虑过使用 position: relative; top: -15px; 吗？ - Tejs

Answer 1

$('#div_id').css({marginTop: '-=15px'});

这将修改具有id“div_id”的元素的CSS。

为了获得您想要的效果，我建议将上述代码添加到动画的回调函数中（这样在动画完成后该div将被移动）：

$('#div_id').animate({...}, function () {
    $('#div_id').css({marginTop: '-=15px'});
});

当然，您可以像这样动画化边距的变化：

$('#div_id').animate({marginTop: '-=15px'});

这里是jQuery中 .css() 的文档: http://api.jquery.com/css/

这里是jQuery中 .animate() 的文档: http://api.jquery.com/animate/

- Jasper

---

@Kira 在 properties 参数之后可以传递 duration 参数。它应该是一个整数，默认值为 400：http://api.jquery.com/animate/ - Jasper

使用动画margin属性是一个不好的主意，因为它会改变元素的布局并导致回流。更好的想法是使用CSS过渡中的transform-translate属性进行动画处理。 - Slava Fomin II

Answer 2

$('div').css({
    position: 'relative',
    top: '-15px'
});

- gislikonrad

Answer 3

在元素中添加以下css代码：

margin-top: -15px; /*for exact positioning */
margin-top: -5%; /* for relative positioning */

您可以使用任何一个来相应地定位。

- srinivas

---

如果您只想使用CSS，那么这种方法效果最佳。 - Ryan Trainor

Answer 4

你也可以这样做

margin-top:-30px; 
min-height:40px;

这个“help”可以防止div把所有东西都向上拉一点。

- Mr Heelis