jQuery以递增方式添加css值

Question

我想在此css更改中添加或减去'top'的值.而不是指定特定的像素数量,我想将20px添加到外部css提供的当前值.

目标是使列表向上移动.

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

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

Answer 1

根据您的编辑:

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

或者您可以20px在使用时添加每次点击animate:

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

top除非您还指定,否则该属性不会起作用position:

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

更改position到absolute或relative按您的需求.

请注意,如果你想要的.list元素只出现在其容器内而改变top,你需要分配position:relative给父元素和absolute对.list元素.

Answer 2

该.css()方法还允许采用"+ ="和" - ="语法.animate().所以你可以这样做:

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