jquery - 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');
});

Answer 3

有关完整示例，请参阅此 JSFiddle：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');
});

​</p>

Answer 4

将您的“向上”类更改为按钮的不同 ID

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

取容器的 margin-top 的当前值并修改它：

$('#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)
})

Answer 5

CSS 并不是真正用于进行数学和运算，而是更多地用于指定您的样式。最好的方法是，在 javascript 中，

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

例如。使用 CSS3 动画效果会更好。像这样

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)" 

Answer 6

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