JQuery css "+ =" not working

Question

I have a <div> :

 <div class="ball" style="top: 1px;"></div> 

The top property is set using the jQuery .css function as follows:

 $( ".ball" ).css( { top : var_top } ); 

However, when I try to increase it using this syntax, it does not work:

 $( ".ball" ).css( { top : "+=" + var_top } ); 

I even tried it in the Firebug console as follows:

 $( ".ball" ).css( { top : "+=7px" } ); $( ".ball" ).css( { top : "+=7" } ); 

but none of them work.

Answer 1

you can try this

 $( ".ball" ).css({ top : "+=" + var_top + 'px'}); 

NOTE: If .ball has position:absolute , then its parent must have position:relative ;

And it seems that your code also works

Answer 2

I think you need to restore the old value, increase it and reassign:

 var topPosition = $( ".ball" ).css('top'); topPosition += increment; $( ".ball" ).css('top', topPosition);