jQuery css "+=" not working

Question

I have this <div>:

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

The top property is set using jQuery function .css like so:

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

However, when I try to increment it using this syntax, it doesn't work:

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

I even tried it in Firebug's console like this:

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

but neither of these work either.

Are you using jQuery 1.6 or better?

Rob Lowe
– Rob Lowe

2012-05-24 14:24:34 +00:00
Commented May 24, 2012 at 14:24 — Rob Lowe
– Rob Lowe, Commented May 24, 2012 at 14:24
@RobLowe I'm using the latest jQuery

Iulian Onofrei
– Iulian Onofrei

2012-05-24 14:54:19 +00:00
Commented May 24, 2012 at 14:54 — Iulian Onofrei
– Iulian Onofrei, Commented May 24, 2012 at 14:54

thecodeparadox · Accepted Answer · 2012-05-24 14:22:35Z

3

you could try this

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

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

And it seems your code is also working

edited May 24, 2012 at 14:22

answered May 24, 2012 at 14:16

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Iulian Onofrei Over a year ago

It's parent has a relative position of course but, I'm trying to make a classical Pong game in javascript/jQuery and when the balls gets to the top it won't increment it's property. I guess it's a problem in my code but then, why isn't it working at least in the console?

Davide Gualano · Accepted Answer · 2012-05-24 14:21:58Z

0

I think you have to retrieve the old value, increment it and than reassign it:

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

answered May 24, 2012 at 14:21

Davide Gualano

13.1k9 gold badges47 silver badges67 bronze badges

3 Comments

Reinstate Monica Cellio Over a year ago

You don't need to do that. You can use += and -= with jQuery css.

Davide Gualano Over a year ago

Is this a new feature? I have never encountered it before!

Rob Lowe Over a year ago

The feature is new in jQuery 1.6

Collectives™ on Stack Overflow

jQuery css "+=" not working

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related