Increment css top property using jquery

I have the following div :

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

What is the best way to increase the top property when an event开发者_运维百科 occurs?

Note that I've tried: $('#new').css('top')+10 but the problem is that .css returns string.

---

The simplest way is to use the += operator:

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

---

You can use the parseFloat function to get only the initial numeric part and convert it from a string to a number. For example:

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

As a side note, if you want to change multiple elements' positions all at once, that could be:

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

But if you are just trying to animate an element over time, take a look at jQuery's .animate method.

---

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

---

I would say create a variable, increment the variable, and then reset the property using the new value, like this

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

then in your click event

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

---

var New = $("#new");

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

by adding the seconds parameter of to css your setting the property.