Increment css top property using jquery

Question

I have the following div :

What is the best way to

Answer 1

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');
}

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

The simplest way is to use the += operator:

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