使用jquery增加css top属性

Question

我有以下div：

<div id="new" style="position: absolute; z-index: 100; top: 210px; width: 195px..

事件发生时增加top属性的最佳方法是什么？

请注意，我尝试过：$('#new').css('top')+10但问题是.css会返回字符串。

Answer 1

最简单的方法是使用+=运算符：

$( '#new' ).css( 'top', '+=10px' );

Answer 2

您可以使用parseFloat function仅获取初始数字部分，并将其从字符串转换为数字。例如：

var n = $('#new');
n.css('top', (parseFloat(n.css('top')) + 10) + 'px');

作为旁注，如果您想同时更改多个元素的位置，可能是：

$('.someClass').css('top', function(i, v) {
    return (parseFloat(v) + 10) + 'px';
});

但是如果你只想尝试一个元素的动画，请看一下jQuery的.animate method。

Answer 3

var el = $('#new');
el.css('top', (parseInt(el.css('top'), 10) + 10) + 'px');

Answer 4

我想说创建一个变量，增加变量，然后使用新值重置属性，就像这样

var topProperty = 0;   //You can also populate this variable with the current value.

然后在您的点击事件中

{
topProperty += 10;
$('#new').css('top', topProperty + 'px');
}

Answer 5

var New = $("#new");

function onEvent()
{
   New.css("top", parseFloat(New.css("top")) + 10 + "px");
}

通过添加秒参数来设置css属性。