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.
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.
