jQuery add css value incrementally

Question

I want to add or subtract the value of 'top' in this css change. Rather then specifying a specific ammount of pixels I would like to add 20px to the current value provided by the external css.

The goal is to make the list move up an down.

$('.up').click(function(){
   $('.list').css('top','-20px');
});

the HTML

<div id="container">
    <ul class="list">
        <li >first item</li>
        <li class="active">second item</li>
        <li>third item</li>
        <li >fourth item</li>
    <ul>
</div>   
<a href="#" class="up">up</a>
<a href="#" class="up">down</a>

Sarfraz · Accepted Answer · 2012-05-04 06:12:44Z

16

Based on your edit:

$('.up').click(function(){
   $('.list').css({position:'absolute', top: parseInt($('.list').css('top'), 10) + 20 + 'px'});
});

Or you can add 20px with each click while using animate like this:

$('.up').click(function(){
   $('.list').css({position:'absolute'});
   $('.list').animate({top: '+=20'});
});

The top property wont work unless you also specify position:

$('.up').click(function(){
   $('.list').css({position:'absolute', top:'-20px'});
});

Change position to absolute or relative as per your needs.

Note that if you want the .list element appear only inside its container while changing top, you need to assign position:relative to parent element and absolute to .list element.

edited May 4, 2012 at 6:12

answered May 4, 2012 at 6:06

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

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

Comments

Doug · Accepted Answer · 2015-01-08 02:56:21Z

9

The .css() method also allows the "+=" and "-=" syntax that .animate() takes. So you can simply do this:

$('.up').click(function(){
   $('.list').css('top','-=20px');
});

edited Jan 8, 2015 at 2:56

answered Jun 4, 2013 at 5:55

Doug

8327 silver badges14 bronze badges

1 Comment

JayD3e Over a year ago

This should be the best answer imo.

Rody · Accepted Answer · 2012-05-04 06:11:11Z

1

See this JSFiddle for a complete example: http://jsfiddle.net/NYVmw/

$('.up').click(function(){
    var newtop = $('.list').position().top - 20;
    $('.list').css('top', newtop + 'px');
});

$('.down').click(function(){
    var newtop = $('.list').position().top + 20;
    $('.list').css('top', newtop + 'px');
});

answered May 4, 2012 at 6:11

Rody

2,6551 gold badge22 silver badges43 bronze badges

1 Comment

patrick Over a year ago

wow, I thought I knew what I wanted to do, but this was a game changer for me. Thanks so much!

gabitzish · Accepted Answer · 2012-05-04 06:08:39Z

0

Change your 'up' class into different id's for the buttons

<a href="#" id="up">up</a>
<a href="#" id="down">down</a>

Take the current value of container's margin-top and modify it :

$('#up').on('click', function(){
  currentValue = parseInt($('#container').css("margin-top"));
  currentValue -= amount;
  $('#container').css("margin-top", currentValue)
})

$('#down').on('click', function(){
  currentValue = parseInt($('#container').css("margin-top"));
  currentValue += amount;
  $('#container').css("margin-top", currentValue)
})

answered May 4, 2012 at 6:08

gabitzish

9,7117 gold badges47 silver badges67 bronze badges

Comments

marklar · Accepted Answer · 2012-05-04 06:09:40Z

0

CSS isn't really for doing math and operations, but more for just specifying your styles. The best way to do it would be to, in javascript,

getElementById("nameofyourelement").style['top'] = "5px"

for example. Using CSS3 animations would even be better. Like this

getElementById("nameofyourelement").style['-webkit-transition-duration'] = "1s" //1 second duration for animation, set to 0 if you don't want animation
getElementById("nameofyourelement").style['-webkit-transform'] = "translateY(5px)"

answered May 4, 2012 at 6:09

marklar

5028 silver badges22 bronze badges

Comments

Eric Yin · Accepted Answer · 2012-05-04 06:06:13Z

-1

$('.list').css('position','relative').css('top','-20px');

answered May 4, 2012 at 6:06

Eric Yin

8,99921 gold badges82 silver badges123 bronze badges

3 Comments

Murtaza Over a year ago

wrong way of writing jQuery, You could have merged css functions. $('.list').css({'position':'relative', 'top':'-20px'});

Eric Yin Over a year ago

I just want to put more attention on position. and also, its not a WRONG way, it works as well

Murtaza Over a year ago

yes it will generate the correct result, but do you prefer the same to be used in your project?? it is a wrong idea of calling same function twice, whereas it can be done in one.

Collectives™ on Stack Overflow

jQuery add css value incrementally

6 Answers 6

Comments

1 Comment

1 Comment

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related