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>
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.
The .css()
method also allows the "+=" and "-=" syntax that .animate()
takes. So you can simply do this:
$('.up').click(function(){
$('.list').css('top','-=20px');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With