Приращение свойства css top с помощью jquery

У меня есть следующий div:

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

Каков наилучший способ увеличить свойство top при возникновении события?

Обратите внимание, что я пробовал: $('#new').css('top')+10, но проблема в том, что .css возвращает строку.

Ответы

Вы можете использовать parseFloat функцию, чтобы получить только начальную числовую часть и преобразовать ее из строки в число. Например:

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.

Самый простой способ - использовать оператор +=:

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

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

Я бы сказал, создайте переменную, увеличьте переменную, а затем reset свойство, используя новое значение, например

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

то в событии click

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

var New = $("#new");

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

добавив параметр seconds, чтобы css установил свойство.